Cheatsheet Babel

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

# Com webpack:
npm i -D babel-loader

Pacotes essenciais.

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

Configuração básica.

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

Integrar com webpack.

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

Preset principal (recomendado).

npm i -D @babel/preset-react

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

Suporte a JSX.

npm i -D @babel/preset-typescript

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

Remover tipos TypeScript.

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

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

Definir browsers alvo.

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

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

Features experimentais.

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

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

Evitar duplicação de helpers.

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

// Maioria já incluída no preset-env

Sintaxe específica.

# babel.config.js → projeto inteiro
# .babelrc → só o pacote/diretório

# Monorepo: usar babel.config.js
# Biblioteca: usar .babelrc

Diferenças de scope.

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

Config por ambiente.

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

Regras por ficheiro.

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

Compilar com CLI.

--out-dir, -d  # diretório output
--out-file, -o # ficheiro output
--watch, -w   # modo watch
--source-maps # gerar source maps
--extensions  # .js,.jsx,.ts
--ignore     # padrões a ignorar

Opções de CLI.

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

Scripts de build.

npm i core-js@3

// useBuiltIns opções:
"usage"  # importa só o necessário
"entry"  # importa tudo no entry
false    # sem polyfills (padrão)

Polyfills automáticos.

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

Config para testes.

{
  "presets": [[
    "@babel/preset-env", {
      "debug": true
    }
  ]]
}
// Mostra plugins e polyfills usados

Ver transformações aplicadas.