Webpack + Babel: Transpilando tu .JS
Si queremos escribir código aplicando las últimas especificaciones de JavaScript (ES2015+), tenemos que convertirlo usando una configuración que lo haga compatible según donde se usará.
Por ejemplo no todos los navegadores soportan ES7 entonces podemos transpilar nuestro código a ES2005 que es aceptado por todos los navegadores actuales o podemos transpilarlo a ES5 para dar soporte desde Internet Explorer 10.
Para esta tarea usaremos Babel. Que de hecho no solo sirve para transpilar desde (.js), sino también desde TypeScript (.ts), React (.jsx), entre otros.
En este artículo usaremos babel v7 y babel-loader v8 en Webpack v4. Para mayor información sobre porque usamos este “mix” ir al repositorio de babel-loader.
npm install --save-dev @babel/corenpm install --save-dev babel-loader
También necesitaremos un paquete de plugins para la transpilación. El paquete oficial recomendado es @babel/preset-env
.
npm install --save-dev @babel/preset-env
Configurando Babel
Creamos un archivo de configuración estático: .babelrc
.
{
"presets": ["@babel/preset-env"]
}
Esto nos carga los plugins y configuración por defecto de @babel/preset-env
que viene siendo exactamente lo mismo que usar @babel/preset-es2015
, @babel/preset-es2016
y @babel/preset-es2017
juntos (o el depreciado babel-preset-latest
).
Esta configuración no es recomendada si no se han indicado los destinos donde se usará el JavaScript a transpilar.
Targets
Los destinos para nuestro código pueden ser indicados directamente en el archivo .babelrc
.
Por ejemplo si nuestro código solo será usado en node
a partir de cierta versión:
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "6.10"
}
}]
]
}
O si nuestro código solo será usado en un navegador a partir de cierta versión:
{
"presets": [
["@babel/preset-env", {
"targets": {
"safari": "10"
}
}]
]
}
Para este último caso lo recomendable es usar browserslists. Babel automáticamente se encargará de leerlo e interpretarlo para la transpilación.
Para usarlo solo necesitamos crear el archivo browserslist
.
> 1%
last 2 versions
En el archivo que creamos hemos indicado que consideré los navegadores usados por más del 1% de usuarios de Internet y además que consideré las 2 últimas versiones de todos los navegadores usados en el mundo.
Para revisar si nuestra consulta considerará los navegadores que requerimos podemos ir a http://browserl.ist/ y probar: > 1%, last 2 versions .
La lista completa de cómo consultar ciertas versiones de navegadores puedes encontrarla en la documentación de Browserslist.
Configurando Webpack
Crearemos el archivo webpack.config.js
donde indicaremos a Webpack que siga una regla: Si el nombre de alguno de los archivos procesados termina en .js
y excluyendo el contenido de node_modules
entonces el archivo encontrado será también procesado por babel-loader
.
Configurando un proyecto Webpack con Babel
Usaremos como base el proyecto del anterior artículo y agregaremos el archivo .babelrc
:
Los navegadores a soportar que indicaremos en nuestro archivo browserslist
serán Google Chrome, Mozilla Firefox, MS Internet Explorer 10+, MS Edge 12+, Safari 10+, iOS 10+ (Safari), y Android 4+ (Android Browser y Google Chrome Mobile).
También agregaremos el archivo webpack.config.js
que mencionamos anteriormente.
Instalamos las dependencias de Babel en el proyecto:
npm install --save-dev @babel/corenpm install --save-dev @babel/preset-envnpm install --save-dev babel-loader
Y ahora nuestro archivo package.json
debería verse así:
{
"name": "webpack4-babel7-demo",
"version": "1.0.0",
"scripts": {
"dev": "webpack --mode development --devtool source-maps",
"prod": "webpack --mode production"
},
"author": "Renzo Castro Jurado",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0"
}
}
Configuración lista!
Crearemos un modulo JavaScript para probar nuestra configuración.
// ./src/modules/utils.jsexport const sumar = (a, b) => a + b;
Y actualizaremos el contenido del archivo ./src/index.js
.
// ./src/index.jsimport { sumar } from './modules/utils';const resultado = sumar(5, 2);
Ahora solo tenemos que correr nuestra tarea. Usaremos la tarea dev
para lograr visualizar el archivo final sin minimizar.
npm run dev
El archivo ./dist/main.js
ha sido generado. Nuestro código JavaScript ha sido transpilado para ser soportado por los navegadores que indicamos.
Notamos a que algunas partes del código fueron cambiadas:
const
»var
.() => { }
»function () { }
.export
eimport
»exports.
y__webpack_require__
.
Esto es gracias a Babel y su configuración por defecto usando @babel/preset-env
junto a browserslist
.
Hasta aquí hemos aprendido sobre babel
, browserslist
y su configuración básica. En el siguiente artículo veremos más a fondo otros tipos de configuraciones para Babel y algunas estrategias para sacarle el mejor provecho.