La configuration de Babel pour compiler les codes Javascript es6+ dans une version rétrocompatible de JavaScript dans les navigateurs ou environnements actuels et anciens est probablement la solution la plus simple pour la chose la plus simple que j’ai rencontrée en tant que développeur. Cependant, il m’a fallu du temps pour réaliser cela et cela était dû au fait que Babel n’est pas seulement un paquet que vous branchez dans votre projet et qu’il commence à jouer, mais vous devez en fait rassembler plusieurs paquets pour le faire fonctionner, connaître les bons paquets à choisir peut être déroutant. Dans cet article de blog, j’expliquerais comment vous pouvez configurer Babel pour vous aider à compiler vos codes Javascript es6, es7, es8, etc. en versions de Javascript qui peuvent s’exécuter sans erreurs dans l’exécution de NodeJS.

Comme je l’ai dit plus tôt, faire fonctionner Babel implique d’obtenir quelques paquets de npm, alors commençons. Le premier paquet que nous installerions est babel-core. C’est le moteur babel, mais il ne peut vraiment rien faire tout seul, il a besoin d’autres packages pour l’aider.

Exécutez npm install @babel/core --savepour installer babel-core

Le deuxième paquet que nous installerions est le babel-cli. Ce paquet garantit que nous pouvons utiliser Babel à partir de la ligne de commande et comme nous travaillons dans un environnement de nœud, nous devrions certainement en avoir besoin.

Exécutez npm install @babel/cli --savepour installer babel-cli

Vous voudrez peut-être inclure un script babel dans la section script de votre package.jsoncomme ceci:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

Cela nous aiderait à éviter de taper des commandes longues et confuses dans l’interface de ligne de commande chaque fois que nous voulons compiler.

Testing

Maintenant, avec ces deux paquets, nous pouvons réellement faire quelque chose avec babel, juste pour sentir ce qu’est babel, cependant, aucune transformation ne se produirait encore.

Créez un fichier test.js et écrivez-y des codes JavaScript es6, puis allez sur la ligne de commande et exécutez

npm run babel test.js -- --out-file compiledTest.js

Vous devriez voir un nouveau fichier compiledTest.js et ce fichier contiendrait juste la même chose que vous écrit dans le test.js, donc, aucune compilation n’a eu lieu mais Babel fonctionne.

La commande que nous avons exécutée ci-dessus indique simplement à Babel de compiler le fichier test.js dans un fichier de sortie nommé compiledTest.js. Si vous avez besoin de compiler des fichiers dans un répertoire, faites simplement:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Donc, pour que Babel fasse la compilation proprement dite, nous devons installer des plugins pour aider le babel-core. La vérité est que babel ne fait rien lui-même, il utilise des plugins installés pour effectuer sa magie. Pour que nous puissions compiler les codes es6+, nous devons installer le envpreset

Exécutez npm install @babel/preset-env --save pour installer le envpreset

Attendez, n’ai-je pas dit que babel avait besoin de plugins, alors qu’est-ce qui est prédéfini? Eh bien, un préréglage n’est qu’un groupe de plugins, donc j’ai raison, babel a besoin d’un plugin ou de plugins.
Le préréglage env est un groupe de plugins qui aident à compiler les versions modernes/futures de JavaScript (ES2015, ES2016, etc.) dans une version actuellement prise en charge de javascript.

Après avoir installé ce paquet, nous devons dire à Babel,

Hé mec, je viens d’installer un ensemble de plugins que je veux que vous utilisiez pour ma compilation.

Nous le ferions en créant un fichier .babelrc et ce fichier contiendrait cet extrait

{
"presets" : 
}

Maintenant, allez sur la ligne de commande et essayez de compiler notre test.js à nouveau.

Si le fichier compiledTest.js contient la version es5 du test.jsune fois la compilation terminée, c’est tout; nous venons de configurer babel, mais si ce n’est pas le cas, alors vous voudrez peut-être vérifier si tout s’est bien passé dès le début.

Juste pour confirmation, la structure de votre fichier devrait être quelque chose de similaire comme ceci:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Compilation à la volée

Parfois, vous ne voulez pas compiler tous vos codes avant de les exécuter; vous voulez juste que la compilation et l’exécution se produisent en même temps. Pour ce faire, vous devez utiliser la commande babel-node. Cette commande est livrée avec le package babel-cli et c’est comme un remplacement de la commande node. Donc, au lieu de faire quelque chose comme ça node ./path/to/file pour exécuter votre fichier, vous feriez babel-node ./path/to/file pour compiler et exécuter le fichier en même temps.

Remarque, le nœud babel n’est pas dans votre ligne de commande par défaut, vous devrez peut-être modifier la section script de votre package.json pour inclure

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

Et exécutez votre fichier comme ceci:

npm run babel-node ./path/to/file

Conclusion

J’ai écrit / mis à jour cet article de blog avec babel-core à la version 7.2.0, si vous découvrez que babel a apporté des changements de rupture dans le processus de configuration dans certaines versions supérieures, vous pouvez me le faire savoir ([email protected] ) pour que je mette à jour ce billet de blog, merci.