Skip to content
A webpack powered script runner for React projects.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
config
scripts
templates
.eslintrc
.gitignore
.npmignore
.npmrc
.nvmrc
.prettierignore
.prettierrc
CHANGELOG.md
CONTRIBUTING.md
README.md
commitlint.config.js
package-lock.json
package.json 0.7.0 Sep 13, 2019

README.md

reintroducing Script Runner

The reintroducing Script Runner (rSR for short) is a tool that extracts the front end build process out of your project so you don't have to worry about managing dependencies and build configuration.

Prerequisites

  • Node and npm installed on your machine.
    • nvm is highly recommended for managing node/npm versions.
    • Currently supporting node version 12.8.0.

Setup

Follow the steps below to install and initialize rSR in a new project.

  1. Create new project.
    mkdir [project-name]
    cd [project-name]
    npm init
  2. Install rSR.
    npm install @reintroducing/rsr -D
  3. Initialize rSR and follow the prompts to scaffold a new project.
    npx rsr
  4. Begin development.
    npm start

Available Configuration

You can override a handful of configuration options by creating a rsr.config.js file at the root of your project. Most options are direct pass throughs of their webpack counterparts as shown below. The module should export a function that returns an object. The following parameters are passed into the function:

  • webpack: The internal rSR webpack instance.
  • mode: The environment in which the config will be executed.
  • defaultConfig: The default configuration for the given mode.
    • While you can use this to override every option in rSR, it is not recommended. This is mostly provided as an escape hatch or if you need to pull existing values from the config and should be used sparingly. Destructuring this onto the return object and altering it can cause your builds to not function correctly.
module.exports = ({webpack, mode, defaultConfig}) => {
    const isDev = mode === 'development'; // 'development', 'production'

    return {
        // config options
    };
};

You can use the mode passed to set options based on the environment. All options are optional, you can include as little or as many as you'd like.

analyzer

Options object to pass through to the bundle analyzer.

default:

{
    analyzerMode: isDev ? 'static' : 'disabled',
    openAnalyzer: false,
}

cssModulesIdentName

Allows changing the localIdentName that the selectors in CSS modules receive during output generation.

default: '[name]-[local]'

devServerPort

The port to run the dev server on.

default: 3000

devServerProxy

Adds a proxy middleware to the dev server.

optimization

An optimization object to apply. By default, the minimizer is already set for production builds (both OptimizeCssAssetsPlugin and TerserPlugin). If you wish to overwrite these you can pass a new one in. Other settings passed here will be applied as is.

plugins

An array of additional plugins to apply.

rules

An array of additional rules to apply.

sourceMap

The style of source map to use. Set to false for any mode to disable.

default: isDev ? 'cheap-module-source-map' : 'source-map'

Custom Production Asset Path

In some cases () you may want to pass a specific path for your static assets to replace the pre-configured publicPath. You can do so by setting a special ASSET_PATH environment variable before running the build script in your build configuration.

ASSET_PATH=/ npm run build
You can’t perform that action at this time.