Backpack configuration and scripts for Create React App.
npm install @skyscanner/backpack-react-scriptsThis package is a fork of Create React App (specifically thereact-scripts package). It's intended to be used in conjuction with create-react-app like so:
``sh
npx create-react-app my-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm
What is different in our fork?
- Compilation of uncompiled Backpack components (specifically JSX).
- Skyscanner specific template with Backpack components integrated out of the box. Published as
- CSS Modules enabled by default for all & .scss files.
- Ability to create a bundle for server side rending.
- Automatic chunking is disabled by default.
- css.html & js.html: New files in the build/ output folder. These are html partials that include and references to the various static assets output by webpack. Useful if automatic chunking is turned on and you don't want to worry about order.
- A bunch of configuration options via "backpack-react-scripts" field in package.json:
- crossOriginLoading: Modify the default behaviour, see docs.
- babelIncludePrefixes: An array of module name prefixes to opt into babel compilation. Includes ["@skyscanner/bpk-", "bpk-"] by default.
- enableAutomaticChunking: Boolean, opt in to automatic chunking of vendor, common and app code.
- vendorsChunkRegex: String, Regex for picking what goes into the vendors chunk. See cacheGroups in webpack docs. Dependent on enableAutomaticChunking being enabled
- amdExcludes: Array of module names to exclude from AMD parsing. Incldues ["lodash"] by default.
- externals: exposing the Webpack config to modify externals, see docs.
- ssrExternals: Similar to above, but for ssr.js only.
- cssModules: Boolean, true by default.
- sriEnabled: Sets if SRI is to be used during build to add integrity hash for files, see docs.
- Note if this is enabled, crossOriginLoading value is overriden with anonymous in order for it to output with the integrity value.
- ignoreCssWarnings`: Boolean, false by default. Allows the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output, see docs. False by default