BabelJS - Presets de Babel

Los ajustes preestablecidos de Babel son detalles de configuración para el babel-transpiler que le dicen que lo transpile en el modo especificado. Estos son algunos de los ajustes preestablecidos más populares que discutiremos en este capítulo:

• ES2015
• Env
• React

Necesitamos usar ajustes preestablecidos que tengan el entorno en el que queremos convertir el código. Por ejemplo, es2015 preset convertirá el código a es5 . El preajuste con el valor env también se convertirá a es5 . También tiene una característica adicional, es decir, opciones. En caso de que desee que la función sea compatible con versiones recientes de navegadores, babel convertirá el código solo si no hay soporte de funciones en esos navegadores. Con Preset react , Babel transpilará el código cuando reaccionar.

Para trabajar con Presets, necesitamos crear un archivo .babelrc en la carpeta raíz de nuestro proyecto. Para mostrar el funcionamiento, crearemos una configuración de proyecto como se muestra a continuación.

mando

npm init

Tenemos que instalar el preset de babel requerido de la siguiente manera junto con babel cli, babel core, etc.

Paquetes de Babel 6

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Paquetes de Babel 7

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

Note - babel-preset-es2015 está obsoleto desde babel 7 en adelante.

es2015 or @babel/env

Cree el archivo .babelrc en la raíz del proyecto (babel 6) -

En .babelrc, los ajustes preestablecidos son es2015. Esta es la indicación para el compilador de babel de que queremos que el código se convierta a es2015.

Para babel 7, necesitamos usar ajustes preestablecidos de la siguiente manera:

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

Aquí está el package.json después de la instalación:

Como hemos instalado babel localmente, hemos agregado el comando babel en la sección de scripts en package.json.

Trabajemos en un ejemplo simple para verificar el transpilado usando el ajuste preestablecido es2015.

Ejemplo

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

Transpilado a es5 como se muestra a continuación.

mando

npx babel main.js --out-file main_es5.js

main_es5.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

Usando Env preset, puede especificar el entorno en el que se transpilará el código final.

Vamos a utilizar la misma configuración de proyecto creada anteriormente y cambiaremos los ajustes preestablecidos de es2015 a env como se muestra a continuación.

Además, necesitamos instalar babel-preset-env. Ejecutaremos el comando que se indica a continuación para instalar el mismo.

mando

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

Compilaremos main.js nuevamente y veremos el resultado.

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

mando

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Hemos visto que el código transpilado es es5. En caso de que conozcamos el entorno en el que se ejecutará nuestro código, podemos usar este preset para especificarlo. Por ejemplo, si especificamos los navegadores como la última versión para Chrome y Firefox, como se muestra a continuación.

mando

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Ahora estamos obteniendo la sintaxis de la función de flecha tal como está. No se transpila a la sintaxis de ES5. Esto se debe a que el entorno que queremos que admita nuestro código ya tiene soporte para la función de flecha.

Babel se encarga de compilar el código basado en el entorno utilizando babel-preset-env. También podemos apuntar a la compilación en función del entorno de nodejs como se muestra a continuación

La compilación final del código se muestra a continuación.

mando

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babel compila el código según la versión actual de nodejs.

React Preset

Podemos usar react preset cuando estamos usando Reactjs. Trabajaremos en un ejemplo simple y usaremos react preset para ver el resultado.

Para usar el preset, necesitamos instalar babel-preset-react (babel 6) de la siguiente manera:

npm install --save-dev babel-preset-react

Para babel 7, es como sigue:

npm install --save-dev @babel/preset-react

Los cambios en .babelrc son los siguientes para babel6:

Para babel 7

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

main.js

<h1>Hello, world!</h1>

mando

npx babel main.js --out-file main_env.js

main_env.js

React.createElement(
   "h1",
   null,
   "Hello, world!"
);

El código de main.js se convierte a la sintaxis de reactjs con preset: react.