BabelJS - CLI

Babel est livré avec une interface de ligne de commande intégrée, qui peut être utilisée pour compiler le code.

Créez un répertoire dans lequel vous travailleriez. Ici, nous avons créé un répertoire appelé babelproject . Utilisons nodejs pour créer les détails du projet.

Nous avons utilisé npm init pour créer le projet comme indiqué ci-dessous -

Voici la structure du projet que nous avons créée.

Maintenant, pour travailler avec Babel, nous devons installer Babel cli, Babel preset, Babel core comme indiqué ci-dessous -

babel-cli

Exécutez la commande suivante pour installer babel-cli -

npm install --save-dev babel-cli

babel-preset

Exécutez la commande suivante pour installer babel-preset -

npm install --save-dev babel-preset-env

babel-core

Exécutez la commande suivante pour installer babel-core -

npm install --save-dev babel-core

Après l'installation, voici les détails disponibles dans package.json -

Nous avons installé des plugins babel localement sur le projet. Ceci est fait pour que nous puissions utiliser babel différemment sur nos projets en fonction des exigences du projet et également des différentes versions de babeljs. Package.json donne les détails de la version de babeljs utilisée.

Afin d'utiliser babel dans notre projet, nous devons spécifier la même chose dans package.json comme suit -

Babel est principalement utilisé pour compiler du code JavaScript, qui aura une compatibilité descendante. Maintenant, nous allons écrire notre code dans ES6 -> ES5 ou ES7 -> ES5 aussi ES7-> ES6, etc.

Pour fournir des instructions à Babel sur la même chose, lors de l'exécution, nous devons créer un fichier appelé .babelrc dans le dossier racine. Il contient un objet json avec les détails des préréglages comme indiqué ci-dessous -

Nous allons créer le fichier JavaScript index.js et le compiler vers es2015 en utilisant Babel. Avant cela, nous devons installer le préréglage es2015 comme suit -

Dans index.js, nous avons créé une fonction en utilisant la fonction flèche qui est une nouvelle fonctionnalité ajoutée dans es6. En utilisant Babel, nous compilerons le code en es5.

Pour exécuter vers es2015, la commande suivante est utilisée -

npx babel index.js

Production

Il affiche le code index.js dans es5 comme indiqué ci-dessus.

Nous pouvons stocker la sortie dans le fichier en exécutant la commande comme indiqué ci-dessous -

npx babel index.js --out-file index_es5.js

Production

Voici le fichier que nous avons créé, index_es5.js -