BabelJS - Configuración del proyecto usando Babel 7

La última versión de Babel, 7 lanzada con cambios en los paquetes ya existentes. La parte de instalación sigue siendo la misma que para Babel 6. La única diferencia en Babel 7 es que todos los paquetes deben instalarse con@babel/, por ejemplo @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill, etc.

Aquí hay una configuración de proyecto creada con babel 7.

Mando

Ejecute el siguiente comando para iniciar la configuración del proyecto:

npm init

Instalar los siguientes paquetes

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

Aquí está el package.json creado:

Ahora creará un .babelrc archivo en la carpeta raíz -

Crea una carpeta src/ y agregar archivo main.js a él y escriba su código para transpilar a es5.

src / main.js

let add = (a,b) => {
   return a+b;
}

comando para transpilar

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

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

El funcionamiento de Babel 7 sigue siendo el mismo que el de Babel 6. La única diferencia es la instalación de pacakge con @babel.

Hay algunos ajustes preestablecidos en desuso en babel 7. La lista es la siguiente:

  • Ajustes preestablecidos de ES20xx
  • babel-preset-env
  • babel-preset-latest
  • Preajustes de escenario en Babel

También se elimina el año de los paquetes: @babel/plugin-transform-es2015-classes es ahora @babel/plugin-transform-classes

Veremos un ejemplo más de trabajo con mecanografiado y lo transpilaremos a JavaScript Es2015 usando mecanografiado preestablecido y babel 7.

Para trabajar con mecanografiado, necesitamos que el paquete de mecanografiado se instale de la siguiente manera:

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

Crear test.ts archivo en el src/ carpeta y escriba el código en forma mecanografiada -

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

mando

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");