Cheatsheet Babel

npm i -D @babel/core @babel/cli
npm i -D @babel/preset-env

# With webpack:
npm i -D babel-loader

Essential packages.

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "defaults"
    }]
  ]
}

Basic configuration.

// webpack.config.js
module: {
  rules: [{
    test: /\.js$/,
    exclude: /node_modules/,
    use: 'babel-loader',
  }]
}

Integrate with webpack.

{
  "presets": [[
    "@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }
  ]]
}

Main preset (recommended).

npm i -D @babel/preset-react

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

JSX support.

npm i -D @babel/preset-typescript

{
  "presets": [
    "@babel/preset-typescript"
  ]
}

Strip TypeScript types.

"targets": "defaults"
"targets": "> 1%, last 2 versions"
"targets": { "node": "18" }
"targets": { "chrome": "90" }

// or .browserslistrc:
> 0.5%
last 2 versions
not dead

Define target browsers.

@babel/plugin-proposal-decorators
@babel/plugin-proposal-pipeline-operator
@babel/plugin-transform-runtime

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

Experimental features.

npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

{
  "plugins": [[
    "@babel/plugin-transform-runtime",
    { "corejs": 3 }
  ]]
}

Avoid helper duplication.

@babel/plugin-syntax-dynamic-import
@babel/plugin-syntax-import-meta
@babel/plugin-proposal-class-properties

// Most already included in preset-env

Specific syntax.

# babel.config.js → whole project
# .babelrc → only the package/directory

# Monorepo: use babel.config.js
# Library: use .babelrc

Scope differences.

{
  "presets": [],
  "plugins": [],
  "sourceMaps": true,
  "env": {
    "test": {
      "presets": [["preset-env",
        { "targets": { "node": "current" }}]]
    }
  }
}

Per-environment config.

{
  "overrides": [{
    "test": ["./src/legacy/**/*.js"],
    "presets": [[
      "@babel/preset-env",
      { "targets": "ie 11" }
    ]]
  }]
}

Per-file rules.

npx babel src --out-dir lib
npx babel src -d lib --watch
npx babel file.js -o output.js
npx babel src -d lib --source-maps

Compile with the CLI.

--out-dir, -d  # output directory
--out-file, -o # output file
--watch, -w   # watch mode
--source-maps # generate source maps
--extensions  # .js,.jsx,.ts
--ignore     # patterns to ignore

CLI options.

"scripts": {
  "build": "babel src -d lib",
  "dev": "babel src -d lib -w",
  "clean": "rm -rf lib && babel src -d lib"
}

Build scripts.

npm i core-js@3

// useBuiltIns options:
"usage"  # imports only what is needed
"entry"  # imports everything at the entry
false    # no polyfills (default)

Automatic polyfills.

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env',
      { targets: { node: 'current' }}],
  ],
};

Config for tests.

{
  "presets": [[
    "@babel/preset-env", {
      "debug": true
    }
  ]]
}
// Shows plugins and polyfills used

See applied transformations.