Voyez notre cours vidéo Babel 7 et Webpack 4 :
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Passez votre compétence JavaScript au niveau supérieur :
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel est une chaîne d’outils qui est principalement utilisée pour convertir le code ECMAScript 2015+ en une version rétrocompatible de JavaScript dans les navigateurs ou environnements actuels et plus anciens. ECMAScript 2015+ équivaut à ES6+.
Vous pouvez considérer Babel comme un traducteur. ES6+ JS nous offre de nombreuses nouvelles fonctionnalités et syntaxes. Elles peuvent améliorer énormément l’efficacité de notre développement. Mais pour l’instant, la plupart de ces nouvelles fonctionnalités sont méconnaissables dans les navigateurs. Pour trouver un équilibre entre la compatibilité et la commodité et l’efficacité du développement, Babel a été développé.
Nous, programmeurs, écrivons des codes en ES6+ et demandons ensuite à Babel de les traduire en codes que les navigateurs peuvent comprendre.
Babel lui-même ne peut gérer que la traduction des nouvelles syntaxes. ES6+ a également ajouté de nombreuses nouvelles API comme Promise, Map, Object.assign(), etc. Une nouvelle API signifie de nouveaux objets, propriétés et méthodes. API est juste un nom fantaisiste. Ne vous laissez pas intimider par elle. Pour les traiter, nous devons ajouter ces API dans ES5. Ce travail est effectué par un assistant de Babel. Nous vous montrerons plus tard qui est cet assistant.
Souvenez-vous donc de cette conclusion : Babel traduit les nouvelles syntaxes et son assistant gère les nouvelles API.
D’abord, allez sur le site officiel de Babel et cliquez sur le bouton Docs.
Babel gère la traduction de la syntaxe. Polyfill gère les fonctionnalités manquantes. Donc réponse à la question que nous avons laissée avant : l’assistant de Babel est le polyfill.
En plus de traduire ES6+, Babel peut aussi gérer JSX et TypeScript. Voici donc un autre concept : preset. Le preset est la traduction que Babel utilise. Il contrôle la façon dont Babel effectue la traduction.
Donc maintenant, vous avez appris deux concepts importants de Babel : preset et polyfill.
Puis, installons Babel.
Installation et configuration de Babel:
C’est la commande d’installation suggérée par le manuel officiel de Babel. Si vous regardez de près, vous constaterez qu’il y a en fait quatre paquets installés, trois comme dépendance de développement et un comme dépendance de production.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, tout comme ce que son nom a suggéré, est le noyau de l’ensemble du programme Babel.
Babel/cli est l’interface en ligne de commande. Nous l’utilisons pour communiquer avec babel.
Babel lui-même ne sait pas comment traduire les codes ES6. Il a besoin de plugins pour lui dire comment faire. Il y a beaucoup de plugins. Les installer et les paramétrer un par un est un travail de longue haleine. Par conséquent, la meilleure solution est d’utiliser babel preset. Preset est une collection de plugins. Le preset que nous utilisons est preset-env.
Babel/preset-env est le standard utilisé par Babel 7 pour traduire ES6+ en ES5. Dans Babel 7, preset-env a remplacé preset-2015/6/7, etc.
Babel/polyfill sert à ajouter des fonctionnalités ES6+ dans ES5. Alors pourquoi avons-nous besoin de faire cela ?
La nouvelle syntaxe n’est pas la seule différence entre ES6 et ES5. ES6 a déjà reçu de nombreuses nouvelles API. API est juste un nom fantaisiste pour les objets intégrés. Ces nouveaux objets intégrés sont très utiles mais le problème est qu’ils n’existent pas dans l’environnement ES5.
La seule solution est d’ajouter ces objets intégrés dans l’environnement ES5. C’est à cela que sert le polyfill.
Allumons notre propre terminal et mettons en place un projet.
D’abord, nous allumons le terminal et créons un répertoire racine de projet. Ensuite, nous CD dedans et npm init.
Puis, nous copions les quatre commandes d’installation du manuel officiel de Babel et les collons dans le terminal.
Quand l’installation est terminée, vous devriez voir ces quatre paquets être installés :
Ouvrons notre projet dans VSC et vérifions le package.json.
Cli, core, et preset-env sont des dépendances de développement. polyfill est une dépendance de production.
Vous pouvez penser à polyfill comme un code source. Il stocke les sources de toutes les nouvelles fonctionnalités d’es6.
ES5 + polyfill = ES6.
Avant de pouvoir utiliser Babel, nous devons le configurer. La meilleure façon de le faire est de créer un fichier pour stocker les informations de configuration de Babel.
Dans Babel 6, nous stockons les informations de configuration dans .babelrc ou package.json.
Babel 7 nous offre une nouvelle solution : babel.config.js.
Le manuel de Babel nous a offert un modèle pour créer babel.config.js. Il nous suffit de le copier dans le dossier racine de notre projet.
D’abord, nous module exporte un objet.
Puis nous y définissons une propriété presets. La valeur de presets est un tableau.
À l’intérieur du tableau, nous mettons un autre tableau.
Le premier élément du tableau enfant est le preset que nous voulons utiliser. Ici, nous le définissons à @babel/env ou @babel/preset-env.
Le deuxième élément est un objet config. À l’intérieur de celui-ci, il y a deux propriétés : targets et useBuiltIns. Targets est pour la configuration des navigateurs et useBuiltIns pour les polyfills.
Maintenant, nous avons installé et configuré Babel.
Après, testons-le.
Dans le répertoire racine du projet, nous créons un nouveau fichier : es6.js.
Puis nous allumons le terminal et entrons une commande babel : npx babel es6.js. Voici ce que nous obtiendrons :
Les let ES6 ont été convertis en var ES5.
NPX babel est le même que node_modules/.bin/babel
Maintenant, nous avons réussi à « babéliser » notre premier fichier ES6.
Vous pourriez vouloir sortir le fichier traduit comme un fichier indépendant. Dans ce cas, vous avez besoin de -o ou – output-dir.
-o et – output-file ne peuvent traduire qu’un seul fichier à la fois. Dans votre développement réel, vous pourriez vouloir stocker les fichiers ES6 dans un répertoire et traduire chaque fichier de ce répertoire.
Par exemple, dans le répertoire racine du projet, nous créons deux répertoires enfants : ES6 et ES5. Nous écrivons nos fichiers ES6 dans dir ES6. Puis nous les « Babelons » dans le répertoire ES5. Les fichiers HTML relient les fichiers JS de dir es5.
Dans ce cas, la commande dont nous avons besoin est npx babel ES6 -d ES5 ou npx babel ES6 – out-dir ES5.
Maintenant, tous les fichiers du répertoire ES6 seront « babélisés » dans le répertoire ES5.
Puis, montrons ce que le polyfill peut faire pour nous.
C’est le fichier que nous voulons babéliser:
Il utilise beaucoup d’API ES6 qui n’existent pas dans ES5. La seule façon de leur permettre de fonctionner dans un environnement ES5 est d’ajouter les codes sources de ces nouvelles API dans l’environnement ES5. C’est à cela que sert polyfill et c’est aussi pourquoi polyfill est installé en tant que dépendance de production. Nous en avons besoin en production.
Voici une analogie moins précise pour vous aider à comprendre pourquoi nous avons besoin de polyfill.
Disons que nous avons un programme jQuery. Nous ne pouvons pas exécuter notre programme jQuery directement. Nous devons d’abord établir un lien avec le code source de jQuery. Polyfill est le code source de jQuery que nous lions.
C’est le fichier ES5 « babeled » que nous avons :
Vous voyez tous ces fichiers requis ? Ils sont chargés par le polyfill. Mais le fichier « babeled » ne peut pas être utilisé par les fichiers HTML directement. Nous devons les regrouper en utilisant webpack. Mais tous les « codes sources API » nécessaires ont été chargés.
Ce paramètre est contrôlé par la proprété useBuiltIns dans babel.config.js. Cette propriété a trois valeurs : usage, false et entry.
Usage est la meilleure valeur et la plus couramment utilisée. C’est également ce que nous recommandons.
En dehors de l’usage, useBuiltIns a deux autres valeurs : false et entry.
False fermera le polyfill. Cela signifie que vous devez lier les API nécessaires manuellement. Vous ne voulez certainement pas faire cela.
Si vous utilisez entry, vous devez « require » @babel/polyfillEntry au début de votre fichier. Ensuite, babel va d’abord vérifier la propriété targets pour comprendre quels sont les navigateurs cibles. Il va charger toutes les APIs qui ne sont pas supportées par le navigateur cible. Évidemment, nous obtiendrons beaucoup d’API inutiles de cette façon.
Donc en résumé, mettez useBuiltIns à usage et Babel s’occupera du reste pour vous.
Consultez notre cours COMPLET sur Babel 7 et Webpack 4 à Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Consultez notre cours COMPLET sur le développement web à Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
.