Babel + ESLint + Webpack = Next JS

Configurar Babel + Webpack, loaders, plugins y Linter Javascript.

Sebastian Yabiku .S
Apr 22 · 7 min read

Si deseas empezar un proyecto utilizando lo último de javascript y no tener problemas con el soporte en los navegadores y además quieres agregarle un soporte modular a todos tus recursos y aprender a configurar un linter javascript para manejar estándares de codificación. Este tutorial es para ti.


Qué aprenderemos?

  • Babel
  • Webpack
  • Webpack Loaders
  • Webpack Plugins
  • ESLint

Qué es Babel?

Babel es un transpilador javascript que transforma el código “es6,7,8” a una versión soportada por el navegador al que hayas configurado en tu archivo de configuración de babel.

Empecemos

Suponiendo que estamos empezando un proyecto desde 0 lo primero que haremos será crear la estructura e inicializar npm.

mkdir es6project
cd es6project
npm init -y

Hasta este punto ya tenemos configurado el proyecto con npm y podremos empezar a instalar todos las dependencias desde npm. Entonces empezaremos instalando los módulos de babel.

npm install @babel/core @babel/preset-env --save-dev

Una vez instalado el módulo core de babel y el módulo de preset. Crearemos un archivo con la extensión .babelrc donde podremos configurar el soporte a los navegadores y configurar presets y plugins específicos.

{ 
"presets": [
"@babel/preset-env"
]
}

En la definición de arriba estamos configurando un preset dentro del archivo .babelrc; Este nos ofrece una configuración pre establecida de plugins.

También podemos indicarle al preset a que navegadores o plataformas dar soporte.

{ 
"presets": [
"@babel/preset-env",
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
]
}

En el ejemplo de arriba estamos indicando, que el soporte sea desde chrome 58 hacia adelante, y para internet explorer desde el 11 hacia adelante.

Podemos hacer este tipo de especificaciones gracias al trabajo conjunto con los proyectos Browserslist, CompatTable y Electron to Chromium.

Si deseamos configurar el soporte de navegadores o plataformas, se recomienda que las especificaciones al usar browserslist sean en un archivo externo con el formato .browserslistrc .

Si tuviéramos una funcionalidad no configurada en el preset-env ; Podremos agregar esta a través de los plugins específicos, por ejemplo configuraremos para que los módulos exportados de es6 sean con el formato de módulo amd.

Instalamos la dependencia.

npm install --save-dev @babel/plugin-transform-modules-amd

Configuramos el plugin dentro del archivo .babelrc y ahora cuando se transpile los modulos es6 serán en formato amd.

{ 
"presets": [
"@babel/preset-env"
],
"plugins": ["@babel/plugin-transform-modules-amd"]
}

Hasta aquí, tenemos configurado babel para que este tenga soporte de es6. Ahora comenzaremos a configurar webpack.

Qué es Webpack?

Webpack nos ayuda a interpretar nuestros recursos(css,js,img,etc..) en paquetes modulares, y también nos ayuda a generar paquetes para distintos entornos(test, desarrollo, producción) y todo esto desde javascript.

Antes de empezar definiremos los 4 conceptos básicos para una configuración en webpack.

  • Entry: Es el punto de entrada o sea acá configuraremos el archivo inicial desde donde webpack empezara a interpretar los módulos para generar los paquetes.
  • Output: En este punto configuraremos el paquete de salida generado desde la entrada.
  • Loaders: Encargados de dar soporte a otros tipos de formato(css, img, etc..) que no sean javascript ni json. A través de un loader podremos importar otros formatos desde js.
  • Plugins: Los plugins están encargados de generar tarea y esta tarea puede ser un conjunto de procesos.

Con estos 4 conceptos, podremos empezar.

Empecemos

Instalamos las dependencias

npm install webpack webpack-cli --save-dev

Una vez terminada la instalación, procederemos a crear el archivo de configuración . Por estándar nos sugirieron que le pongamos webpack.config.js

Hasta el momento tenemos esto.

Configuración parcial. Babel y Webpack.

En el archivo de webpack como pueden ver, hemos definido el archivo de entrada y también hemos definido el archivo de salida en su directorio correspondiente.

Ahora configuraremos algunos loaders para poder interpretar css, sass imágenes y el javascript transpirado por babel.

Instalamos las dependencias.

npm install babel-loader --save-dev
npm install style-loader css-loader --save-dev
npm install file-loader url-loader --save-dev
npm install sass-loader node-sass --save-dev

Después de esto lo que hemos instalado ha sido:

  • babel-loader: Interpreta código generado en babel.
  • style-loader: Inyecta css al dom.
  • css-loader: Interpreta los @import y url como modules require.
  • file-loader: Nos permite cargar archivos externos.
  • url-loader: Transforma las dependencias a base 64 trabaja en conjunto con file-loader.
  • sass-loader: Carga archivos en formato sass y los transforma a css.
  • node-sass: Dependencia de sass.

Una vez instalada las dependencias de loaders para webpack. Tenemos que configurar nuestro archivo webpack con los loaders.

Configuración de Webpack con loaders.

Entonces una vez configurado webpack con los loaders, tendríamos lo siguiente.

Configuración de loaders e implementación de archivos sass e importación de estos desde módulo.

Como vemos en la imagen de arriba ya tenemos configurado webpack con loaders y podemos usar sass y también importar imágenes, si desearan agregar mas soporte a loaders, pueden documentarse en el siguiente enlace sobre todos los loaders que webpack ofrece.

Ahora instalaremos algunos plugins básicos, para entender su funcionamiento.

npm install --save-dev html-webpack-plugin

Una vez instalado el plugin, lo siguiente es configurarlo en webpack. Lo que tendríamos sería esto.

Configuración webpack

Hemos declarado el plugin html; Lo que hace este plugin nos genera un html en tiempo de transpiración y referencia el js generado por webpack.

También acepta un objeto de configuración donde le podemos definir el título y la plantilla que usará para generar el html. Si desean saber más sobre plugins pueden ingresar aquí.

Hasta este punto terminamos de configurar Babel, Webpack, con loaders y plugins, lo que prosigue es correr el compilador de webpack y que se genere el paquete.

Para esto configuraremos un script en npm dentro del archivo package.json, específicamente dentro del objeto scripts.

Configuración package.json

Lo único que haremos para correr el script será; Desde la consola

npm run build

Esto nos generará un transpilado de los módulos. Estos se exportarán en el directorio que definimos en webpack.config.js. Teniendo lo siguiente.

Proyecto transpilado en carpeta dist

Culminamos con la configuración inicial de loaders y plugins. Ahora empezaremos a instalar las dependencias de ESLint y también lo integraremos a webpack.

Qué es ESLint

ESLint es un proyecto open source dentro de la categoría de linters. Un Linter nos ayuda a escribir un código de mayor calidad ya que este tiene reglas a seguir para que el código compile o se valide de manera correcta. Los linters pueden ser configurados con guías de estilos de escritura de código. Por ejemplo como :

Estas guías de estilo no son las únicas, cada framework también tiene las suyas, pero a partir de esta base el linter interpretará las reglas de escritura y hará que pasen o se tengan que corregir.

En este proyecto utilizaremos el linter ESLint

Comencemos

Instalamos dependencias y luego corremos el comando para la configuración.

npm install eslint --save-devnpx eslint --init

Empezaremos un cuestionario de configuración, en nuestro caso respondimos de la siguiente manera.

Respuestas del cuestionario.

Luego verificara las dependencias, en este caso la guía de estilos de airbnb y nos preguntará si queremos instalarla. La instalamos y esperamos.

Configuración generada con eslint.

Una vez culminada la configuración esta nos generará un archivo con la siguiente estructura como muestra la imagen. Lo siguiente es integrar este linter con webpack y se hace cómo lo hicimos con babel;

ASÍ ES lo haremos con un loader.

Instalamos la dependencia de webpack.

npm install eslint-loader --save-dev

Lo siguiente seria configurar webpack, agregamos dentro de las reglas de js en el atributo loader el nuevo loader.

Una vez configurado ejecutamos el comando para transpilar el código. Esto nos generará lo siguiente.

Configuración y ejecución de webpack.

Como pueden observar se generaron errores al comparar nuestro código con la guía de estilos de airbnb.

Esta comparación hará que tengamos código más consistente y con un estándar definido.

Una vez resuelto todos los conflictos la compilación será exitosa y se verá de esta manera.

Código validado.

Ya tenemos un proyecto básico donde podremos empezar a escribir lo último de javascript. Cualquier duda o corrección, dejenme un comentario.

Les comparto las referencias oficiales si desearan profundizar en los temas aquí vistos.

y el repositorio de lo visto en el articulo.

https://github.com/sebastian-yabiku/webpackbasic

Sebastian Yabiku .S

Written by

Pragmatic above all things

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade