Configuración de Babel 6

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Babel 6 acaba de salir del horno y aún estamos organizando muchos aspectos. En los últimos dos días hemos visto más actividad en GitHub y Slack que nunca. Todos los que han estado ayudando han hecho un trabajo excelente.

Sin embargo, la documentación todavía es insuficiente en este momento. Actualmente estoy trabajando en crear una sección completamente nueva de "Primeros pasos" en el sitio.

Esta publicación del blog cubrirá la mayoría de los conceptos básicos hasta que ese trabajo esté completo.

Instalación de Babel

El paquete babel ya no existe. Anteriormente, incluía todo el compilador, todas las transformaciones y un conjunto de herramientas CLI, pero esto generaba descargas innecesariamente grandes y era un poco confuso. Ahora lo hemos dividido en dos paquetes separados: babel-cli y babel-core.

Shell

$ npm install --global babel-cli
# or
$ npm install --save-dev babel-core

Si deseas usar Babel desde la línea de comandos (CLI), puedes instalar babel-cli, o si prefieres usar la API de Node, instala babel-core.

Actualmente, la mayoría de las integraciones no se han actualizado para Babel 6, pero esto cambiará en los próximos días.

Adición de Plugins y Presets

Babel 6 se distribuye sin transformaciones predeterminadas, por lo que cuando ejecutas Babel en un archivo, simplemente lo imprimirá de vuelta sin realizar cambios.

Para comenzar a compilar diversas características, necesitas instalar plugins. Por ejemplo, si quieres usar funciones de flecha:

Primero instala el plugin de funciones de flecha:

Shell

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Luego agrégalo a tu archivo .babelrc así:

JavaScript

{
  "plugins": ["transform-es2015-arrow-functions"]
}

Ahora, si ejecutas Babel en un archivo con funciones de flecha, estas se compilarán. ¿Sencillo, verdad? No tan rápido.

Los plugins de Babel están diseñados para compilar de manera incremental. Imagina que quieres usar una característica de ES2019: se compilaría a ES2018, luego a ES2017, y así sucesivamente. Esto garantiza que las personas puedan usar implementaciones nativas si lo desean.

Esto incluso ocurre dentro de una sola especificación; por ejemplo, las constantes de ES2015 se compilarán en variables let de ES2015. Por lo tanto, si necesitas que llegue completamente a ES5, también debes compilar eso.

Shell

$ npm install --save-dev babel-plugin-check-es2015-constants
$ npm install --save-dev babel-plugin-transform-es2015-block-scoping

JavaScript

{
  "plugins": [
    "check-es2015-constants",
    "transform-es2015-block-scoping"
  ]
}

Estas dependencias no son fáciles de rastrear, y si no quieres especificarlas todas manualmente, puedes instalar un preset en su lugar.

Shell

$ npm install --save-dev babel-preset-es2015

JavaScript

{
  "presets": ["es2015"]
}

Para incluir todas las versiones de JavaScript:

Shell

$ npm install --save-dev babel-preset-env

JavaScript

{
  "presets": ["env"]
}

React también tiene su propio preset:

Shell

$ npm install --save-dev babel-preset-react

JavaScript

{
  "presets": ["react"]
}

Esto también es lo que reemplazó a la opción stage:

Shell

$ npm install --save-dev babel-preset-stage-2

JavaScript

{
  "presets": ["stage-2"]
}

Nota: Los presets de etapa incluyen automáticamente todas las etapas superiores (ej. etapa 1 incluye 2 y 3)