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");