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