Transpilar JavaScript con Babel

• 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 de preset-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 como options de babel-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 en targets 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 de async/await en mi código y, como nuestros navegadores objetivo marcados en target no entienden su uso, Babel utiliza el módulo regenerator-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.