DevTools
Ayúdanos

Cheatsheet Babel

Compilador de JavaScript para compatibilidade com browsers antigos

Volver a los lenguajes
Babel
19 tarjetas encontradas
Categorías:
Versiones:

Setup

3 cards
Instalar 
npm i -D @babel/core @babel/cli
npm i -D @babel/preset-env

# Con webpack:
npm i -D babel-loader

Paquetes esenciales.

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

Configuración básica.

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

Integrar con webpack.

Presets

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

Preset principal (recomendado).

@babel/preset-react 
npm i -D @babel/preset-react

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

Soporte para JSX.

@babel/preset-typescript 
npm i -D @babel/preset-typescript

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

Eliminar tipos TypeScript.

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

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

Definir navegadores objetivo.

Plugins

3 cards
Plugins de proposal 
@babel/plugin-proposal-decorators
@babel/plugin-proposal-pipeline-operator
@babel/plugin-transform-runtime

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

Features experimentales.

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

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

Evitar duplicación de helpers.

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

// La mayoría ya incluida en preset-env

Sintaxis específica.

Configuração

3 cards
babel.config.js vs .babelrc 
# babel.config.js → proyecto entero
# .babelrc → solo el paquete/directorio

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

Diferencias de scope.

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

Config por entorno.

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

Reglas por archivo.

CLI

3 cards
Comandos 
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 con la CLI.

Flags 
--out-dir, -d  # directorio output
--out-file, -o # archivo output
--watch, -w   # modo watch
--source-maps # generar source maps
--extensions  # .js,.jsx,.ts
--ignore     # patrones a ignorar

Opciones de CLI.

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

Scripts de build.

Avançado

3 cards
Polyfills (core-js) 
npm i core-js@3

// opciones de useBuiltIns:
"usage"  # importa solo lo necesario
"entry"  # importa todo en el entry
false    # sin polyfills (por defecto)

Polyfills automáticos.

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

Config para tests.

Debug y verbose 
{
  "presets": [[
    "@babel/preset-env", {
      "debug": true
    }
  ]]
}
// Muestra plugins y polyfills usados

Ver transformaciones aplicadas.