BabelJS - Babel CLI

BabelJS viene con una interfaz de línea de comandos incorporada en la que el código JavaScript se puede compilar fácilmente en el script ECMA respectivo utilizando comandos fáciles de usar. Discutiremos el uso de estos comandos en este capítulo.

Primero, instalaremos babel-cli para nuestro proyecto. Usaremos babeljs para compilar el código.

Crea una carpeta para que tu proyecto juegue con babel-cli.

mando

npm init

Monitor

Package.json creado para el proyecto anterior -

Ejecutemos los comandos para instalar babel-cli.

Paquete para babel 6

npm install --save-dev babel-cli

Paquete para babel 7

npm install --save-dev @babel/cli

Monitor

Hemos instalado babel-cli y aquí está el package.json actualizado:

Además de esto, necesitamos instalar babel-preset y babel-core. Veamos ahora el comando para la instalación.

Paquetes para babel 6

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

Paquetes para babel 7

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

Aquí está el package.json actualizado para los comandos anteriores:

Dado que necesitamos compilar en código JavaScript que vamos a escribir para tener compatibilidad con versiones anteriores, lo compilaremos en ECMA Script 5. Para esto, necesitamos instruir a babel para que busque el preset, es decir, la versión es donde se compilará. hecho. Necesitamos crear un.babelrc> archivo en la carpeta raíz de nuestro proyecto creado como se muestra a continuación.

Contiene un objeto json con los siguientes detalles preestablecidos:

{ "presets": ["env"] }

Para babel 7, el .babelrc es el siguiente:

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

Hemos instalado babel local al proyecto. Para hacer uso de babel en nuestro proyecto, necesitamos especificar lo mismo en package.json de la siguiente manera:

Compilar archivos JS

Ahora estamos listos para compilar nuestros archivos JavaScript. Cree una carpeta src en su proyecto; en esta carpeta, cree un archivo llamado main.js y escriba un código javascript es6 como se muestra a continuación:

mando

npx babel src/main.js

Salida

En el caso anterior, el código de main.js se muestra en la terminal en la versión es5. La función de flecha de es6 se convierte a es5 como se muestra arriba. En lugar de mostrar el código compilado en la terminal, lo almacenaremos en un archivo diferente como se muestra a continuación.

Hemos creado una carpeta en nuestro proyecto llamada en la que queremos que se almacenen los archivos compilados. A continuación se muestra el comando que compilará y almacenará la salida donde queramos.

mando

npx babel src/main.js --out-file out/main_out.js

Salida

La opción en el comando --out-file nos ayuda a almacenar la salida en la ubicación del archivo de nuestra elección.

En caso de que queramos que el archivo se actualice cada vez que hagamos cambios en el archivo principal, agregue --watch o -w opción al comando como se muestra a continuación.

mando

npx babel src/main.js --watch --out-file out/main_out.js

Salida

Puede realizar el cambio en el archivo principal; este cambio se reflejará en el archivo compilado.

En el caso anterior, cambiamos el mensaje de registro y el --watch La opción sigue comprobando cualquier cambio y los mismos cambios se agregan en el archivo compilado.

Archivo compilado

En nuestras secciones anteriores, aprendimos cómo compilar archivos individuales. Ahora, compilaremos un directorio y almacenaremos los archivos compilados en otro directorio.

En la carpeta src, crearemos un archivo js más llamado main1.js. Actualmente, la carpeta src tiene 2 archivos javascriptmain.js y main1.js.

A continuación se muestra el código en los archivos:

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main1.js

var handler = () => {
   console.log("Added one more file");
}

El siguiente comando compilará el código del srccarpeta y guárdelo en la carpeta out /. Hemos eliminado todos los archivos delout/carpeta y la mantuvo vacía. Ejecutaremos el comando y verificaremos el resultado en la carpeta out /.

mando

npx babel src --out-dir out

Tenemos 2 archivos en la carpeta de salida: main.js y main1.js

main.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

main1.js

"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

A continuación, ejecutaremos el comando que se proporciona a continuación para compilar ambos archivos en un solo archivo usando babeljs.

mando

npx babel src --out-file out/all.js

Salida

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

En caso de que queramos ignorar la compilación de algunos archivos, podemos usar la opción --ignore como se muestra a continuación.

mando

npx babel src --out-file out/all.js --ignore src/main1.js

Salida

all.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Podemos hacer uso de las opciones de complementos que se utilizarán durante la compilación de archivos. Para hacer uso de complementos, debemos instalarlo como se muestra a continuación.

mando

npm install --save-dev babel-plugin-transform-exponentiation-operator

expo.js

let sqr = 9 ** 2;
console.log(sqr);

mando

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

Salida

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

También podemos usar ajustes preestablecidos en el comando como se muestra a continuación.

mando

npx babel src/main.js --out-file main_es5.js --presets=es2015

Para probar el caso anterior, hemos eliminado la opción de ajustes preestablecidos de .babelrc.

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

También podemos ignorar .babelrc desde la línea de comando de la siguiente manera:

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

Para probar el caso anterior, hemos agregado ajustes preestablecidos nuevamente a .babelrc y los mismos serán ignorados debido a --no-babelrc que hemos agregado en el comando. Los detalles del archivo main_es5.js son los siguientes:

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};