Articles /

Démarrez avec Babel 7

JavaScript est unique en raison de l’étendue de l’écosystème. Alors que les nouvelles normes ajoutent du sucre syntaxique, les faire supporter par les navigateurs prend du temps. Babel contourne ce problème via une transpilation automatique.

L’idée derrière le produit est simple : Babel prend du code ES6 ou ES7 et remplace les nouveaux éléments syntaxiques par du code d’émulation. Sa sortie confirme la syntaxe JavaScript classique et fonctionne sur les anciens navigateurs comme Internet Explorer.

La sortie initiale de Babel a pris le monde d’assaut. Peu de temps après sa première apparition, divers frameworks comme React, Vue et Ember l’ont adopté. Les développeurs utilisent souvent le produit sans savoir qu’il travaille en arrière-plan – plus d’un projet npm populaire a une dépendance à Babel.

  • Comment faire une application

Ces dépendances ont transformé le processus de libération du prédécesseur en une affaire de conflits. La version 7, toujours gérée par une petite équipe de mainteneurs, a donc essayé d’être aussi compatible que possible. Les changements de rupture sont rares, tandis que la qualité de la génération de code reste élevée (si vous travaillez avec une équipe, l’enregistrement des documents dans un stockage en nuage vous aidera à rester cohérent).

Si vous n’avez pas travaillé avec Babel auparavant, laissez ceci être votre guide. Être capable d’utiliser des fonctionnalités JavaScript avancées sans soucis de compatibilité rend la vie beaucoup plus facile.

Vous aimeriez avoir quelques outils pour rationaliser votre processus ? Notre guide du meilleur constructeur de sites Web vous aidera. Vous voulez un soutien à long terme ? Obtenez le bon service d’hébergement web.

Version check

Babel vit généralement dans l’environnement d’exécution Node. Commençons par vérifier les versions utilisées. La sortie fournit l’état de la version trouvée sur la station de travail Ubuntu 14.04 utilisée pour créer l’article suivant. Ce n’est pas de la pédanterie – la figure qui accompagne cette étape montre que l’équipe de Babel a abandonné le support de pas mal de versions de Node.js.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Changement des noms de paquets

Un changement de rupture dans la version 7 a impliqué le déplacement des paquets Babel dans leur propre espace de noms. Les anciens paquets n’ont pas été supprimés des différents dépôts. Ceci est important, car l’utilisation de noms de paquets hérités conduit à la situation présentée dans la figure accompagnant cette étape.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Ajouter une action de construction

L’étape ci-dessus suppose que vous travaillez à l’intérieur d’un projet npm. Dans ce cas, l’exécution de Babel via l’action de construction est facile. Ouvrez package.json et modifiez-le comme démontré dans le code ci-dessous :

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpilez le code à la main

Pour mettre Babel au travail, il faut déclencher l’action de construction. La meilleure façon d’y parvenir est d’utiliser la commande npm run. La valeur -d informe Babel que les résultats doivent être placés dans le dossier lib – la figure qui accompagne cette étape montre que le dossier se crée à la volée.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Une question de configuration

Invoquer Babel sans autres options de configuration ne permet pas la transpilation. Le code ne peut être transpilé que si le framework reçoit des informations supplémentaires sur l’environnement cible. Cela peut être fait via un paramètre de ligne de commande, ou en créant un fichier appelé .babelrc à la racine du projet.

Configurer le babelrc

Babel se configure lui-même via un ensemble de plugins, dont chacun applique des transformations de transpilation à la base de code. Nous utilisons le paquet preset-env – il est livré avec un ensemble pré-configuré de transformations destinées à couvrir la plupart des bases.

{"presets": }

Temps pour un test de conduite

Ajouter un peu de JavaScript new-age à index.js pour tester le programme contre du code vivant. Le code accompagnant cette étape ne fonctionnerait pas sur les anciens navigateurs – une fois fait, la fonction implicite est remplacée par une déclaration normale, comme le montre la figure.

function tamstest(){.map((n) => n + 1);}

Ajuster le ciblage

preset-env applique la plupart des transpilations par défaut : l’objectif du produit est de créer un JavaScript universellement compatible sans tenir compte des coûts de bande passante et de performance. Vous pouvez modifier sa configuration en passant un objet targets – l’exemple ci-dessous cible des versions spécifiques de Chrome et d’IE.

{"presets": ]}

Ciblage avancé

Le ciblage des navigateurs de Babel ne se limite pas à Chrome et Internet Explorer. Grâce à la coopération avec browserslist, les développeurs peuvent mélanger et assortir plus d’une douzaine de cibles, comme indiqué ci-dessous.

Les noms sont insensibles à la casse :

  • Android pour Android WebView.
  • Baidu pour Baidu Browser.
  • BlackBerry ou bb pour le navigateur Blackberry.
  • Chrome pour Google Chrome.
  • ChromeAndroid ou and_chr pour Chrome pour Android.
  • Edge pour Microsoft Edge.
  • Electron pour le framework Electron. Il sera converti en version Chrome.
  • Explorer ou ie pour Internet Explorer.
  • ExplorerMobile ou ie_mob pour Internet Explorer Mobile.
  • Firefox ou ff pour Mozilla Firefox.
  • FirefoxAndroid ou and_ff pour Firefox pour Android.
  • iOS ou ios_saf pour iOS Safari.
  • Node pour Node.js.Opera pour Opera.
  • OperaMini ou op_mini pour Opera Mini.
  • OperaMobile ou op_mob pour Opera Mobile.
  • QQAndroid ou and_qq pour QQ Browser pour Android.
  • Safari pour Safari de bureau.
  • Samsung pour Samsung Internet.
  • UCAndroid ou et_uc pour UC Browser pour Android.

Ciblage avancé, deuxième partie

Browserlist peut également prendre des requêtes avancées. Sa page d’accueil liste les options de configuration, dont la quasi-totalité peut également être utilisée à l’intérieur de Babel en modifiant babelrc. Les requêtes peuvent être évaluées localement si votre station de travail a npx installé.

{"targets": "> 0.25%, not dead"}

Transpilation automatique

Devoir invoquer Babel à la main devient vite fastidieux. L’utilitaire nodemon surveille les ressources du système de fichiers et lance des commandes lorsque des changements sont détectés. En théorie, l’ajout du support de nodemon est géré via une petite modification du package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Vérification de la présence

Certaines stations de travail ont nodemon installé globalement. Si ce n’est pas le cas, l’invocation du programme produira un message d’erreur similaire à celui présenté ci-dessous. Heureusement, le déploiement de nodemon s’effectue facilement via la commande npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Vérifier la fonctionnalité

Démarrer npm start dans une fenêtre de terminal et procéder à la modification du contenu de index.js avec un éditeur comme gedit ou Visual Studio Code. Après l’enregistrement, nodemon sortira des informations d’état.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Corriger la transpilation

Alors que la détection de nodemon devrait fonctionner parfaitement à ce stade, le contenu du fichier index.js qui se trouve dans lib ne se met pas à jour. Cela est dû à une bizarrerie de babel-node – il ne commet pas les fichiers transpilés sur le disque. Au lieu de cela, il déclenche une version modifiée de la CLI de Node, qui fonctionne avec les fichiers transpilés.

Transpiler du code de manière programmatique

Babel n’est pas limité à travailler sur la ligne de commande. Si les paquets corrects sont installés, le code peut également être transpilé depuis un autre programme. Le snippet qui accompagne cette étape applique un ensemble de transformations de base à une chaîne d’entrée. Gardez à l’esprit que les paramètres de configuration, généralement, sont obtenus à partir d’un fichier babelrc.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpiler des fichiers entiers

Le code source n’est généralement pas stocké dans des variables de chaîne. L’API Babel tient compte de ce fait via un ensemble de fonctions liées aux fichiers, qui renoncent à la chaîne d’entrée pour une variable avec un nom de fichier. Les résultats, cependant, sont renvoyés comme une variable JavaScript normale.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync et async

Babel 7 a introduit des versions synchrones et asynchrones de la plupart des appels d’API. Assurez-vous de choisir la bonne pour vos besoins – alors que la transposition de petits exemples peut être faite à la volée, lâcher Babel sur des fichiers plus complexes peut facilement conduire à des retards se chiffrant en dizaines de secondes.

En savoir plus sur les plugins individuels

Si vous vous retrouvez un jour à vous demander ce qui se passe en arrière-plan, visitez simplement cette page. Elle fournit une liste de tous les plugins actuellement contenus dans la distribution Babel, et contient également quelques conseils pour tous ceux qui cherchent à créer un plugin de leur propre cru.

Éliminer les spécificités de TypeScript

Babel ne se limite pas à transpiler les éléments JavaScript du nouvel âge. Le produit contient un moteur TypeScript aux fonctionnalités restreintes. Il dépouille les informations de typage et remplace les éléments avancés. Malheureusement, Babel n’effectue pas de vérification de type – ce qui élimine l’un des avantages les plus importants du langage TypeScript.

{"presets": }

Lancer Babel en ligne

Si les opérations de transpilation se déroulent généralement sans problème, des problèmes surviennent parfois. Dans ce cas, le REPL de Babel est utile. Il exécute Babel dans le navigateur de votre poste de travail et affiche l’entrée et la sortie juste à côté l’une de l’autre.

En savoir plus sur les points douloureux

Notre introduction expliquait que Babel voit une utilisation répandue à travers divers projets. L’équipe de mainteneurs de Babel simplifie les mises à jour des versions grâce à un journal des modifications détaillé. Si vous utilisez Babel de manière programmatique, n’oubliez pas de consulter le guide de mise à niveau de l’API.

Cet article a été publié à l’origine dans le numéro 283 du magazine de création Web Designer. Achetez le numéro 283 ici ou abonnez-vous à Web Designer ici.

  • Comment coder un JavaScript plus rapide et plus léger
  • 5 API Javascript géniales
  • 27 modèles de sites Web de premier ordre

.

Leave a Reply