Guide d'initiation à Babel –

Cet article présente Babel un compilateur JavaScript qui permet aux développeurs d'utiliser le JavaScript de la prochaine génération aujourd'hui.

Il peut être frustrant d'écrire du JavaScript lors de la création d'applications Web. Nous devons réfléchir aux fonctionnalités disponibles dans les navigateurs que nous ciblons et à ce qui se passe lorsqu'une fonctionnalité n'est pas implémentée. Certaines personnes recommandent simplement de ne pas l'utiliser, ce qui est une expérience douloureuse la plupart du temps si nous construisons quelque chose de compliqué.

Heureusement, certains outils nous permettent de ne plus nous soucier de ce qui est supporté. Ils sont appelés transpileurs. Un transpiler est un outil qui prend le code source comme entrée et produit un nouveau code source en sortie, avec une syntaxe différente mais sémantiquement aussi proche que possible – ou idéalement équivalente – de l'original

beaucoup le transpiler standard pour traduire le JavaScript moderne (ES2015 +) en implémentations compatibles fonctionnant dans les anciens navigateurs. C'est la solution parfaite si vous voulez juste vous concentrer sur l'écriture de JavaScript.

Et bien que l'objectif principal de Babel soit de traduire les dernières normes d'ECMAScript (ES) pour les anciens navigateurs, il peut en faire plus. Il y a un écosystème de préréglages et de plugins qui rendent possible l'ajout de fonctionnalités non standard. Chaque plugin rend une nouvelle fonctionnalité / transformation disponible pour votre code, et les presets ne sont qu'une collection de plugins.

Getting Started

Il existe différentes façons de configurer Babel en fonction de votre projet et des outils que vous utilisez. Dans cet article, nous allons expliquer comment configurer Babel à l'aide de l'interface de ligne de commande, bien que si vous utilisez un système de construction ou un framework, vous pouvez consulter des instructions spécifiques sur le site officiel de . La plupart du temps, l'interface CLI est le moyen le plus rapide et le plus facile de commencer, donc si vous êtes un nouvel utilisateur, n'hésitez pas à continuer.

La première étape pour configurer Babel dans un projet est d'installer le paquet en utilisant npm et l'ajouter en tant que dépendance dev. En supposant que l'environnement Node.js fonctionne déjà, il suffit de lancer les opérations suivantes dans votre terminal:

 mkdir babel-test
cd babel-test
npm init -y
npm installer --save-dev babel-cli

Cela créera un répertoire ( babel-test ) qui changera dans le répertoire, initialisera un projet npm (créant ainsi un fichier package.json ), puis installera le babel-cli en tant que dépendance dev.

Si vous avez besoin d'aide avec ce qui précède, veuillez consulter nos tutoriels sur en installant Node et en travaillant avec npm .

Ensuite, nous pouvons ouvrir package.json et ajoutez une commande build à nos scripts npm:

 "scripts": {
  "build": "babel src -d dist"
}

Cela prendra les fichiers sources du répertoire src et affichera le résultat dans un répertoire dist . Ensuite, nous pouvons l'exécuter comme:

 npm run build

Mais attends! Avant d'exécuter Babel, nous devons installer et configurer les plugins qui vont transformer notre code. Le moyen le plus simple et le plus rapide d'y parvenir est d'ajouter le preset Env qui sélectionne les plugins appropriés en fonction des navigateurs cibles que vous indiquez. Il peut être installé en utilisant:

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

Puis créez un fichier .babelrc à la racine de votre projet et ajoutez le preset:

 {
  "préréglages": ["env"]
}

Le fichier .babelrc est l'endroit où vous mettez tous vos paramètres pour Babel. Vous l'utiliserez principalement pour configurer les préréglages et les plugins, mais beaucoup plus d'options sont disponibles. Vous pouvez consulter la liste complète dans la page Babel API .

Veuillez noter que, selon votre système d'exploitation, les fichiers commençant par un point seront masqués par défaut. Si cela vous pose problème (ou si vous préférez moins de fichiers), vous pouvez mettre vos paramètres Babel dans le fichier package.json sous une clé babel comme ceci: [19659013] {
  "nom": "test de babel",
  "version": "1.0.0",
  "babel": {
    // config
  }
}

Enfin, créons les répertoires et les fichiers que Babel s'attend à trouver:

 mkdir src dist

Et donne-lui quelque chose à transformer:

 let a = 1;
soit b = 2;
[a, b] = [b, a];
console.log (a);
console.log (b);

Cet exemple utilise l'affectation de déstructuration pour échanger les valeurs de deux variables

Running Babel

Maintenant que vous avez une installation Babel prête à l'emploi, vous pouvez exécuter la build commande pour lancer le processus de compilation:

 npm run build

Ceci prendra le code de src / main.js le transformera en code ES5 et sortira le code transformé en dist / main.js .

Voilà comment ça fonctionne produit:

 "use strict";

var a = 1;
var b = 2;
var _ref = [b, a];
a = _ref [0];
b = _ref [1];

console.log (a);
console.log (b);

Comme vous pouvez le voir, a laissé a été remplacé par var et Babel a introduit une variable temporaire (indiquée par le trait de soulignement) pour faciliter le swap.

Et c'est tout . Le code que vous écrivez dans le répertoire src sera traduit dans les versions précédentes de la langue. Par défaut, si vous n'ajoutez aucune option au preset, il chargera toutes les transformations. Vous pouvez également indiquer les navigateurs cibles comme suit:

 {
  "préréglages": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

Cela va charger les transformations nécessaires pour supporter les deux dernières versions de chaque navigateur et Safari supérieur ou égal à la version 7. Vous pouvez trouver les options disponibles pour les navigateurs cibles dans le dépôt Browserlist . ] L'écosystème de Babel: un aperçu rapide

Comme vous l'avez remarqué dans la section précédente, Babel ne fera rien par lui-même lorsque vous l'installerez. Nous devons installer un ensemble de plugins pour obtenir le comportement désiré, ou nous pouvons utiliser des presets, qui sont des ensembles prédéfinis de plugins.

Habituellement, chaque fonctionnalité que vous voulez inclure sera sous la forme d'un plugin. Voici quelques exemples pour ES2015:

Voir la page Plugins dans Babel Docs pour une liste complète.

Mais parfois vous ne voulez pas inclure tous les plugins un par un. Il existe donc des préréglages prédéfinis qui faciliteront le processus d'installation de chaque plugin.

Les trois préréglages officiels actuellement disponibles sont:

Env est le plus fréquemment utilisé et celui que nous avons utilisé ici. Il charge automatiquement toutes les transformations nécessaires pour rendre votre code compatible selon les navigateurs ciblés.

Le préréglage React transforme le code généralement trouvé dans les projets React, en ajoutant principalement la compatibilité avec les annotations Flow et JSX .

Enfin, le préréglage Flow est utilisé pour nettoyer le code des annotations de type Flow (bien qu'il ne vérifie pas si le les types sont valides ou non.)

Babel Polyfill

Il y a des fonctionnalités JavaScript qui ne peuvent pas être transformées syntaxiquement, habituellement parce qu'aucune fonctionnalité équivalente n'est implémentée – par exemple, Promises et fonctions de générateur. doit être implémenté dans le navigateur par une bibliothèque à utiliser dans votre code, et c'est le travail d'un polyfill.

Le polyfill de Babel est composé de core-js et du Regenerator ru ntime. Ensemble, ils couvrent toutes les fonctionnalités de ES2015 +

Advanced Use

Comme mentionné, Babel peut également être utilisé pour transformer des fonctionnalités qui n'ont pas encore été implémentées dans la langue. Un bon exemple de ceci est la proposition de champs de classe (actuellement à TC39 étape 3: candidat ). Ceci est particulièrement populaire parmi les développeurs React, car il supprime la nécessité de lier explicitement les méthodes à un composant particulier, et signifie également que l'état d'un composant peut être déclaré en tant que champ de classe (éliminant potentiellement le besoin d'un constructeur

Pour ceux d'entre vous qui souhaitent utiliser les champs de classe aujourd'hui, vous devez ajouter les propriétés babel-plugin-transform-class-properties en tant que dépendance de dev:

 npm install --save -dev babel-plugin-transform-classe-propriétés

Vous devez également mettre à jour votre fichier .babelrc comme suit:

 {
  "presets": ["env"],
  "plugins": ["transform-class-properties"]
}

Vous pouvez maintenant écrire:

 class App extends Component {
  état = {nombre: 0};

  incCount = () => {
    this.setState (ps => ({count: ps.count + 1}));
  }

  render () {
    revenir (
      

        
 {this.state.count} 
         en ajouter un 
      
    );
  }
}

Et ça ne s'arrête pas là. Vous pouvez également utiliser Babel pour ajouter de nouvelles fonctionnalités à la langue, comme le démontre notre tutoriel La compréhension des AST en construisant votre propre plugin Babel .

Alternatives

Ecrire des applications web modernes nécessite parfois plus que les fonctionnalités disponibles en JavaScript. D'autres langues peuvent également être traduites en JavaScript compatible mais aussi implémenter d'autres fonctionnalités utiles.

L'option la plus populaire est TypeScript qui est un JavaScript courant qui implémente des fonctionnalités ES modernes mais en ajoute d'autres.

À l'autre extrême, il existe des langages entièrement différents à travers différentes catégories, des langages fonctionnels comme PureScript à l'objet-orienté comme Dart.

Pour un aperçu plus profond des langages alternatifs, jetez un oeil à 10 langues qui se compilent en JavaScript .

Conclusion

Babel est une excellente option pour écrire des applications modernes tout en continuant à faire du JavaScript compréhensible par tous les développeurs et le large éventail de navigateurs .

Babel n'est pas seulement utile pour transformer ES2015 + en versions antérieures du langage - à la fois dans le navigateur et sur des plates-formes telles que Node.js - mais aussi pour ajouter de nouvelles fonctionnalités. des atures qui ne font pas partie de la norme. Pour voir ce que je veux dire, jetez un coup d'oeil au répertoire npm pour trouver tous les plugins Babel disponibles ou préréglages .

Comme JavaScript évolue à un rythme si rapide, c'est Il est évident que les fabricants de navigateurs auront besoin de temps pour mettre en œuvre les dernières fonctionnalités. Donner à Babel une place dans votre boîte à outils signifie que vous pouvez écrire du code JavaScript de pointe aujourd'hui, en sachant que vous n'abandonnez aucun de vos utilisateurs. Qu'est-ce qu'il n'y a pas d'amour?

Designer indépendant et développeur web basé au Mexique. Chef développeur de CSS Concise, un cadre minimaliste et extensible pour créer rapidement des sites Web avec un bon design.