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.
- Create new project.
mkdir [project-name] cd [project-name] npm init
- Install rSR.
npm install @reintroducing/rsr -D
- Initialize rSR and follow the prompts to scaffold a new project.
npx rsr
- See the
Additional Setup Configs
section below for additional setup steps not related to rSR. - Begin development.
npm start
Additional Setup Configs
As of version 1.0.0
of rSR, different types of configurations have been offloaded from the tool internally and it is required to be maintained by each project manually. This allows for greater flexibility in the management of these configurations and it is a better practice for the tool to not dictate this.
Your project will not function correctly until these are implemented, be it using the above configurations or similar ones that fulfill the requirements for each type of configuration.
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.
devServerOverrides
Any additional dev server options/overrides that should be passed through.
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'
useResources
Imports Sass resources into every Sass module to avoid manual imports in every file where shared variables/mixins/placeholders are used.
default: true
resourcesPath
The path or array of paths to the resources file(s) when useResources
is true
.
default: 'src/common/resources.scss'
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