BabelJS - CLI

Babel viene con una interfaz de línea de comandos incorporada, que se puede usar para compilar el código.

Crea un directorio en el que estarías trabajando. Aquí, hemos creado un directorio llamado babelproject . Hagamos uso de nodejs para crear los detalles del proyecto.

Hemos utilizado npm init para crear el proyecto como se muestra a continuación:

Aquí está la estructura del proyecto que creamos.

Ahora, para trabajar con Babel, necesitamos instalar Babel cli, Babel preset, Babel core como se muestra a continuación:

babel-cli

Ejecute el siguiente comando para instalar babel-cli -

npm install --save-dev babel-cli

preestablecido de babel

Ejecute el siguiente comando para instalar babel-preset -

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

babel-core

Ejecute el siguiente comando para instalar babel-core -

npm install --save-dev babel-core

Después de la instalación, aquí están los detalles disponibles en package.json:

Hemos instalado complementos de babel locales para el proyecto. Esto se hace para que podamos usar babel de manera diferente en nuestros proyectos según los requisitos del proyecto y también diferentes versiones de babeljs. Package.json proporciona los detalles de la versión de babeljs utilizados.

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

Babel se utiliza principalmente para compilar código JavaScript, que tendrá compatibilidad con versiones anteriores. Ahora, escribiremos nuestro código en ES6 -> ES5 o ES7 -> ES5 también ES7-> ES6, etc.

Para proporcionar instrucciones a Babel sobre el mismo, mientras se ejecuta, necesitamos crear un archivo llamado .babelrc en la carpeta raíz. Contiene un objeto json con detalles de los ajustes preestablecidos como se muestra a continuación:

Crearemos el archivo JavaScript index.js y lo compilaremos en es2015 usando Babel. Antes de eso, necesitamos instalar el ajuste preestablecido es2015 de la siguiente manera:

En index.js, hemos creado una función usando la función de flecha que es una nueva característica agregada en es6. Usando Babel, compilaremos el código en es5.

Para ejecutar a es2015, se usa el siguiente comando:

npx babel index.js

Salida

Muestra el código index.js en es5 como se muestra arriba.

Podemos almacenar la salida en el archivo ejecutando el comando como se muestra a continuación:

npx babel index.js --out-file index_es5.js

Salida

Aquí está el archivo que creamos, index_es5.js -