@volvo-cars/babel-preset-react-app

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 this to your .babelrc or babel in package.json:

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

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

npm install @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. By default picks up your closest browserslist configuration. See @babel/preset-env#targets
• modules - The module format to target. See @babel/preset-env#modules

Env options

To easily compile for different targets, you can use Babel's --env-name flag.

• --env-name esmodules - Sets modules: false to make sure modules are not compiled to Common JS.
• --env-name esnext - Sets targets to target modern browsers.