Transpilar JavaScript con Babel
Introducción
Conceptos esenciales
Uso práctico
- Vamos ahora a utilizar Babel, una herramienta (transpilador) que se encarga de convertir nuestro código JavaScript moderno a una versión anterior que todos los navegadores puedan entender.
- De esta forma podemos utilizar todas las nuevas características del lenguaje sin preocuparnos por los navegadores más antiguos que no las soportan al 100%.
- El uso de Babel es tan común en los proceso de compilación actuales que por supuesto existe un puente con Webpack: Babel Loader.
- Tal como se indica, debemos instalar varios varios componentes y plugins con
npm install -D babel-loader @babel/core @babel/preset-env babel-plugin-syntax-dynamic-import
babel-loader
y@babel/core
son auto-explicativos: se trata del loader de Webpack y Babel en sí.@babel/preset-env
está compuesto por un conjunto de reglas que unen las transformaciones y polyfills más utilizados. Si has usado Babel con anterioridad, este es el sustituto depreset-es2015
.- Por último tenemos
babel-plugin-syntax-dynamic-import
que nos permitirá importar módulos JavaScript de forma dinámica, lo cual necesitaremos si queremos utilizar técnicas de Code Splitting más adelante. - Una vez instaladas todas las dependencias, debemos añadir un nuevo set de reglas en
rules
para indicarle a Webpack qué loader hay que usar y que excluya el directorio donde instalamos los módulos Node.
...
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
...
- Ahora debemos crear una configuración específica para Babel en un archivo llamado
.babelrc
ya que si lanzásemos un proceso de compilación ahora lo único que conseguiríamos es el código de origen sin transpilar. En este archivo indicamos a Babel que queremos usar el preset y plugin instalados antes (esto es algo que también podríamos indicar en nuestra configuración de Webpack comooptions
debabel-loader
pero personalmente me gusta más tener configuraciones independientes).
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": "> 0.25%, not dead",
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
- Importante hacer notar que con
modules
indicamos a Babel que no procese los módulos ya que Webpack se encarga de ello. También indicamos entargets
una serie de navegadores objetivo. - Si por fin lanzamos una compilación y la hacemos funcionar desde el navegador nos encontramos con un error:
ReferenceError: regeneratorRuntime is not defined
. Este error es debido al uso deasync/await
en mi código y, como nuestros navegadores objetivo marcados entarget
no entienden su uso, Babel utiliza el móduloregenerator-runtime
que no encuentra porque no lo hemos suministrado. - Hay varias formas de solucionar la situación. En nuestro caso la más sencilla sin duda es instalar el con
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
y añadirlo a la matriz de plugins.
"plugins": [
...
"@babel/plugin-transform-runtime",
...
]
- Si volvemos a lanzar nuestro proceso
build
, todo funciona con normalidad y tenemos la tranquilidad de saber que nuestro código, que usa todas las nuevas características JavaScript, es compatible con navegadores antiguos, de forma automática.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?
Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.