BabelJS - Configurazione del progetto utilizzando Babel 7
L'ultima versione di Babel, 7 rilasciata con modifiche ai pacchetti già esistenti. La parte di installazione rimane la stessa di Babel 6. L'unica differenza in Babel 7 è che tutti i pacchetti devono essere installati con@babel/, ad esempio @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill, ecc.
Ecco una configurazione del progetto creata utilizzando babel 7.
Comando
Esegui il seguente comando per avviare la configurazione del progetto:
npm init
Installa i seguenti pacchetti
npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env
Ecco il package.json creato -
Ora creerà un file .babelrc file nella cartella principale -
Crea una cartella src/ e aggiungi file main.js ad esso e scrivi il tuo codice per transpile in es5.
src / main.js
let add = (a,b) => {
return a+b;
}
comando di transpile
npx babel src/main.js --out-file main_es5.js
main_es5.js
"use strict";
var add = function add(a, b) {
return a + b;
};
Il funzionamento di Babel 7 rimane lo stesso di Babel 6. L'unica differenza è l'installazione di pacakge con @babel.
Ci sono alcuni preset deprecati in babel 7. L'elenco è il seguente:
- Preset ES20xx
- babel-preset-env
- babel-preset-latest
- Preset di scena in Babel
Anche l'anno dai pacchetti viene rimosso - @babel/plugin-transform-es2015-classes è ora @babel/plugin-transform-classes
Vedremo un altro esempio di lavoro con il dattiloscritto e lo trasporteremo in JavaScript Es2015 usando il preset del dattiloscritto e babel 7.
Per lavorare con il dattiloscritto, abbiamo bisogno che il pacchetto dattiloscritto sia installato come segue:
npm install --save-dev @babel/preset-typescript
Creare test.ts file in src/ cartella e scrivi il codice in forma di dattiloscritto -
test.ts
let getName = (person: string) => {
return "Hello, " + person;
}
getName("Siya");
.babelrc
comando
npx babel src/test.ts --out-file test.js
test.js
"use strict";
var getName = function getName(person) {
return "Hello, " + person;
};
getName("Siya");