Volvo Cars Babel Preset React

This package includes a Babel preset suitable for React apps and libraries at Volvo Cars.

Should I use this?

• I am using Next.js - No - Use the defaults for Next.js
• I am using Create React App - No - Use the defaults for Create React App
• I have my own Webpack and Babel setup - Probably - This preset contains a lot of useful defaults and performance optimisations.
• I am developing a library - Yes - You should use this to enable sharing of babel runtime with other widely used libraries.

Usage

This preset uses the useBuiltIns option with some transforms, which assumes that Object.assign is available or polyfilled. It should be if you use @babel/polyfill or @volvo-cars/polyfill.

npm install @volvo-cars/babel-preset-react-app
# or
yarn add @volvo-cars/babel-preset-react-app

Add the following to your .babelrc or "babel" in package.json:

{
  "presets": ["@volvo-cars/babel-preset-react-app"]
}

You should not need any other presets (like preset-env or preset-react) for production builds. If you are missing a transform that you believe can be useful, feel free to make a pull request to this preset to add it.

To compile your code add something like this to your package.json:

{
  "main": "lib/index.js",
  "module": "es/index.js",
  "files": ["lib", "es"],
  "scripts": {
    "build:lib": "babel src --out-dir lib --delete-dir-on-start",
    "build:es": "babel src --env-name esmodules --out-dir es --delete-dir-on-start",
    "build": "yarn run build:lib && yarn run build:es"
  }
}

To avoid duplicating Babel's helper functions in each compiled file, you can do

yarn add @babel/runtime@^7.4.0

{
  "presets": [["@volvo-cars/babel-preset-react-app", { "importHelpers": true }]]
}

This is not the default because it requires an extra package to be installed, but is highly recommended.

Options

• importHelpers (boolean, defaults to false) - Replace Babel helpers (classCallCheck, extends, etc) are with imports from @babel/runtime.
• targets - Describes the compile target/browser support. See @babel/preset-env#targets. By default uses @volvo-cars/browserslist-config.
• modules - The module format to target. See @babel/preset-env#modules

Babel env options

To compile for different targets but otherwise using the same config, you can use Babel's --env-name flag to set some options.

• --env-name esmodules - Sets modules: false to make sure modules are not compiled to Common JS.