Configuration de Babel 6

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Babel 6 vient tout juste de sortir et nous travaillons encore à finaliser plusieurs aspects. Ces deux derniers jours, nous avons observé une activité sans précédent sur GitHub et Slack. Un grand merci à tous ceux qui contribuent avec talent.

Cependant, la documentation est encore lacunaire à ce stade. Je suis actuellement en train de créer une toute nouvelle section « Premiers pas » sur le site.

Ce billet de blog couvrira l'essentiel en attendant sa finalisation.

Installation de Babel

Le paquet babel n'existe plus. Auparavant, il contenait à la fois le compilateur complet, toutes les transformations et divers outils CLI, ce qui entraînait des téléchargements inutilement volumineux et une certaine confusion. Nous l'avons désormais scindé en deux paquets distincts : babel-cli et babel-core.

Shell

$ npm install --global babel-cli
# or
$ npm install --save-dev babel-core

Pour utiliser Babel en ligne de commande, installez babel-cli. Pour l'utiliser via l'API Node, installez babel-core.

Actuellement, la plupart des intégrations ne sont pas encore mises à jour pour Babel 6, mais cela évoluera dans les prochains jours.

Ajout de plugins et de presets

Babel 6 ne contient aucune transformation par défaut. Lorsque vous l'exécutez sur un fichier, il se contente de le réimprimer sans aucune modification.

Pour compiler différentes fonctionnalités, vous devez installer des plugins. Par exemple, pour utiliser les fonctions fléchées :

Commencez par installer le plugin des fonctions fléchées :

Shell

$ npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Puis ajoutez-le à votre fichier .babelrc comme suit :

JavaScript

{
  "plugins": ["transform-es2015-arrow-functions"]
}

Maintenant, si vous exécutez Babel sur un fichier contenant des fonctions fléchées, elles seront compilées. Simple, non ? Pas si vite.

Les plugins Babel sont conçus pour compiler progressivement. Imaginons que vous souhaitiez utiliser une fonctionnalité ES2019 : elle serait d'abord compilée en ES2018, puis ES2017, etc. Cela permet d'utiliser les implémentations natives si disponibles.

Ce processus s'applique même au sein d'une même spécification. Par exemple, les constantes ES2015 seront compilées en variables let ES2015. Si vous voulez descendre jusqu'à ES5, vous devrez également compiler ces variables.

Shell

$ npm install --save-dev babel-plugin-check-es2015-constants
$ npm install --save-dev babel-plugin-transform-es2015-block-scoping

JavaScript

{
  "plugins": [
    "check-es2015-constants",
    "transform-es2015-block-scoping"
  ]
}

Ces dépendances sont complexes à gérer manuellement. Pour éviter de toutes les spécifier, vous pouvez installer un preset.

Shell

$ npm install --save-dev babel-preset-es2015

JavaScript

{
  "presets": ["es2015"]
}

Pour inclure toutes les versions de JavaScript :

Shell

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

JavaScript

{
  "presets": ["env"]
}

React dispose également de son propre preset :

Shell

$ npm install --save-dev babel-preset-react

JavaScript

{
  "presets": ["react"]
}

C'est également ce qui remplace désormais l'option stage :

Shell

$ npm install --save-dev babel-preset-stage-2

JavaScript

{
  "presets": ["stage-2"]
}

Remarque : Les presets stage incluent automatiquement tous les stades supérieurs (ex. le stage 1 inclut les stages 2 et 3)