Configurar Babel para compilar códigos Javascript es6+ en una versión compatible con versiones anteriores de JavaScript en navegadores o entornos actuales lo más fácil que he encontrado como desarrollador. Sin embargo, me tomó tiempo darme cuenta de esto y eso se debió al hecho de que Babel no es solo un paquete que se conecta a su proyecto y comienza a reproducirse, sino que en realidad necesita reunir varios paquetes para que funcione, sabiendo que los paquetes correctos para elegir pueden ser confusos. En esta entrada de blog, explicaría cómo puede configurar Babel para ayudarlo a compilar sus códigos Javascript es6, es7, es8, etc. en versiones de Javascript que pueden ejecutarse sin errores en tiempo de ejecución de NodeJS.

Como dije antes, hacer que Babel funcione implica obtener un par de paquetes de npm, así que comencemos. El primer paquete que instalaríamos es babel-core. Este es el motor de babel, pero en realidad no puede hacer nada por sí solo, necesita algunos otros paquetes para ayudarlo.

Ejecutar npm install @babel/core --save instalar babel-core

El segundo paquete que iba a instalar es el babel-cli. Este paquete garantiza que podamos usar Babel desde la línea de comandos y, dado que estamos trabajando en un entorno de nodo, definitivamente deberíamos necesitarlo.

Ejecute npm install @babel/cli --save para instalar babel-cli

Es posible que desee incluir un script de babel en la sección de script de su package.json así:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

Esto nos ayudaría a evitar escribir comandos largos y confusos en la interfaz de línea de comandos cada vez que queramos compilar.

Probando

Ahora, con estos dos paquetes, podemos hacer algo con babel, solo para sentir lo que es babel, sin embargo, aún no se produciría ninguna transformación.

Cree un archivo test.js y escriba algunos códigos JavaScript es6 en él, luego vaya a la línea de comandos y ejecute

npm run babel test.js -- --out-file compiledTest.js

Debería ver un nuevo archivo compiledTest.js y este archivo contendría lo mismo que usted escrito en el test.js, por lo que no se produjo compilación, pero Babel está funcionando.

El comando que ejecutamos anteriormente simplemente le dice a Babel que compile el archivo test.js en un archivo de salida llamado compiledTest.js. Si necesita compilar archivos en un directorio, simplemente haga:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Así que, para que Babel haga la compilación real, necesitamos instalar algunos complementos para ayudar al núcleo de babel. La verdad es que babel no hace nada por sí mismo, utiliza complementos instalados para realizar su magia. Para nosotros ser capaces de compilar es6+ códigos, debemos instalar el env preset

Ejecutar npm install @babel/preset-env --save para instalar el env preset

Espere, no digo babel necesidades de plugins, así que lo que el infierno está preestablecido? Bueno, un preset es solo un grupo de complementos, así que tengo razón, babel necesita uno o varios complementos.
El preset env es un grupo de plugins que ayudan a compilar versiones modernas/futuras de JavaScript (ES2015, ES2016, etc.) en una versión actualmente soportada de javascript.

Después de instalar ese paquete, necesitamos decirle a Babel,

Hey guy, acabo de instalar un conjunto de complementos que quiero que uses para mi compilación.

Lo haríamos creando un archivo .babelrc y ese archivo contendría este fragmento

{
"presets" : 
}

Ahora vaya a la línea de comandos e intente compilar nuestro test.js archivo de nuevo.

Si el archivocompiledTest.js contiene la versión es5 del test.js después de que la compilación haya terminado, eso es todo; acabamos de configurar babel, pero si no lo hace, puede que desee comprobar si todo salió bien desde el principio.

Solo para confirmar, su estructura de archivos debería ser algo similar a esto:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Compilar sobre la marcha

A veces, no desea compilar todos sus códigos antes de ejecutarlos; solo desea que la compilación y ejecución se realicen al mismo tiempo. Para lograr esto, debe usar el comando babel-node. Este comando viene con el paquete babel-cli y es como un reemplazo del comando node. Así que en lugar de hacer algo como esto node ./path/to/file para ejecutar su archivo, haría babel-node ./path/to/file para compilar y ejecutar el archivo al mismo tiempo.

Tenga en cuenta que el nodo de babel no está en su línea de comandos de forma predeterminada, por lo que puede necesitar modificar la sección de script de su package.json para incluir

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

Y ejecutar su archivo de la siguiente manera:

npm run babel-node ./path/to/file

Conclusión

Escribí / actualizé esta entrada de blog con babel-core en la versión 7.2.0, si descubres que babel ha realizado algunos cambios radicales en el proceso de configuración en algunas versiones superiores, puedes hacérmelo saber ([email protected]) para que actualice esta entrada de blog, gracias.