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.

babel/babel-loader

npm install --save-dev @babel/core
npm 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

Lista corta de plugins instalados con @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/core
npm install --save-dev @babel/preset-env
npm 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.js
export const sumar = (a, b) => a + b;

Y actualizaremos el contenido del archivo ./src/index.js.

// ./src/index.js
import { 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 e import » 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.

Enlaces recomendados

Why does babel rewrite imported function call to (0, fn)(...)?

Semver explained - why is there a caret (^) in my package.json?