BabelJS - Configuration de projet avec Babel 7

La dernière version de Babel, 7 publiée avec des modifications des packages déjà existants. La partie installation reste la même que pour Babel 6. La seule différence dans Babel 7 est que tous les packages doivent être installés avec@babel/, par exemple @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill, etc.

Voici une configuration de projet créée avec babel 7.

Commander

Exécutez la commande suivante pour démarrer la configuration du projet -

npm init

Installer les packages suivants

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

Voici le package.json créé -

Va maintenant créer un .babelrc fichier dans le dossier racine -

Créer un dossier src/ et ajouter un fichier main.js et écrivez votre code à transpiler vers es5.

src / main.js

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

commande de transpiler

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

main_es5.js

"use strict";

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

Le fonctionnement de Babel 7 reste le même que celui de Babel 6. La seule différence est l'installation de pacakge avec @babel.

Il y a quelques préréglages obsolètes dans babel 7. La liste est la suivante -

• Préréglages ES20xx
• babel-preset-env
• babel-preset-latest
• Préréglages de scène à Babel

L'année des paquets est également supprimée - @babel/plugin-transform-es2015-classes est maintenant @babel/plugin-transform-classes

Nous verrons un autre exemple de travail avec le dactylographié et le transpilons en JavaScript Es2015 à l'aide du préréglage dactylographié et de babel 7.

Pour travailler avec dactylographié, nous avons besoin du package dactylographié à installer comme suit -

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

Créer test.ts fichier dans le src/ dossier et écrivez le code sous forme dactylographiée

test.ts

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

getName("Siya");

.babelrc

commander

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

test.js

"use strict";

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

getName("Siya");