BabelJS - Présentation
BabelJSest un transpilateur JavaScript qui transpile les nouvelles fonctionnalités dans l'ancien standard. Avec cela, les fonctionnalités peuvent être exécutées sur les anciens et les nouveaux navigateurs, sans tracas. Un développeur australien, Sebastian McKenzie a lancé BabelJS.
Pourquoi BabelJS?
JavaScript est le langage que le navigateur comprend. Nous utilisons différents navigateurs pour exécuter nos applications - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, navigateur UC, etc. ECMA Script est la spécification du langage JavaScript; l'ECMA Script 2015 ES6 est la version stable qui fonctionne très bien dans tous les nouveaux et anciens navigateurs.
Après ES5, nous avons eu ES6, ES7 et ES8. ES6 est sorti avec de nombreuses nouvelles fonctionnalités qui ne sont pas entièrement prises en charge par tous les navigateurs. Il en va de même pour ES7, ES8 et ESNext (prochaine version de ECMA Script). Il est maintenant incertain quand il sera possible pour tous les navigateurs d'être compatibles avec toutes les versions ES publiées.
Dans le cas où nous prévoyons d'utiliser les fonctionnalités ES6 ou ES7 ou ES8 pour écrire notre code, il aura tendance à se casser dans certains anciens navigateurs en raison du manque de prise en charge des nouvelles modifications. Par conséquent, si nous voulons utiliser les nouvelles fonctionnalités de ECMA Script dans notre code et que nous voulons l'exécuter sur tous les navigateurs possibles disponibles, nous avons besoin d'un outil qui compilera notre code final dans ES5.
Babelfait de même et on l'appelle un transpilateur qui transpile le code dans la version ECMA Script que nous voulons. Il possède des fonctionnalités telles que des préréglages et des plugins, qui configurent la version ECMA dont nous avons besoin pour transpiler notre code. Avec Babel, les développeurs peuvent écrire leur code en utilisant les nouvelles fonctionnalités de JavaScript. Les utilisateurs peuvent obtenir les codes transpilés en utilisant Babel; les codes peuvent être utilisés ultérieurement dans tous les navigateurs sans aucun problème.
The following table lists down the features available in ES6, ES7 and ES8 −
| traits | Version du script ECMA |
|---|---|
| Soit + Const | ES6 |
| Fonctions fléchées | ES6 |
| Des classes | ES6 |
| Promesses | ES6 |
| Générateurs | ES6 |
| Itérateurs | ES6 |
| Modules | ES6 |
| Destructuration | ES6 |
| Littéraux de modèle | ES6 |
| Objet amélioré | ES6 |
| Propriétés par défaut, repos et propagation | ES6 |
| Async - Attendre | ES7 |
| Opérateur d'exponentiation | ES7 |
| Array.prototype.includes () | ES7 |
| Rembourrage de cordes | ES8 |
BabelJS gère les deux parties suivantes -
- transpiling
- polyfilling
Qu'est-ce que Babel-Transpiler?
Babel-transpiler convertit la syntaxe du JavaScript moderne en une forme qui peut être facilement comprise par les navigateurs plus anciens. Par exemple, les classes fonction flèche, const, let seront converties en fonction, var, etc. Ici, la syntaxe, c'est-à-dire, la fonction flèche est convertie en fonction normale en conservant la même fonctionnalité dans les deux cas.
Qu'est-ce que Babel-polyfill?
Il y a de nouvelles fonctionnalités ajoutées dans JavaScript comme les promesses, les cartes et les inclusions. Les fonctionnalités peuvent être utilisées sur un tableau; le même, lorsqu'il est utilisé et transpilé à l'aide de babel ne sera pas converti. Dans le cas où la nouvelle fonctionnalité est une méthode ou un objet, nous devons utiliser Babel-polyfill avec le transpiling pour le faire fonctionner sur les anciens navigateurs.
Voici la liste des fonctionnalités ECMA Script disponibles en JavaScript, qui peuvent être transpilées et polyfilled -
- Classes
- Decorators
- Const
- Modules
- Destructing
- Paramètres par défaut
- Noms de propriété calculés
- Reste / propagation d'objets
- Fonctions asynchrones
- Fonctions fléchées
- Paramètres de repos
- Spread
- Littéraux de modèle
ECMA Script features that can be polyfilled −
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- includess
- Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
- Object.assign,Object.entries,Object.values
Caractéristiques de BabelJS
Dans cette section, nous découvrirons les différentes fonctionnalités de BabelJS. Voici les principales fonctionnalités de BabelJS -
Plugins Babel
Les plugins et les préréglages sont des détails de configuration permettant à Babel de transpiler le code. Babel prend en charge un certain nombre de plugins, qui peuvent être utilisés individuellement, si nous connaissons l'environnement dans lequel le code s'exécutera.
Babel-Presets
Les préréglages Babel sont un ensemble de plugins, c'est-à-dire des détails de configuration vers le transpilateur babel qui indiquent à Babel de transpiler dans un mode spécifique. Nous devons utiliser des préréglages, qui ont l'environnement dans lequel nous voulons que le code soit converti. Par exemple, le préréglage es2015 convertira le code en es5 .
Babel-Polyfills
Certaines fonctionnalités telles que les méthodes et les objets ne peuvent pas être transpilées. Dans de tels cas, nous pouvons utiliser babel-polyfill pour faciliter l'utilisation des fonctionnalités de n'importe quel navigateur. Prenons l'exemple des promesses; pour que la fonctionnalité fonctionne dans les anciens navigateurs, nous devons utiliser des polyfills.
Babel-Polyfills
Babel-cli est livré avec un tas de commandes où le code peut être facilement compilé sur la ligne de commande. Il possède également des fonctionnalités telles que des plugins et des préréglages à utiliser avec la commande, ce qui facilite la transpilation du code en une seule fois.
Avantages de l'utilisation de BabelJS
Dans cette section, nous découvrirons les différents avantages associés à l'utilisation de BabelJS -
BabelJS offre une compatibilité descendante avec toutes les fonctionnalités nouvellement ajoutées à JavaScript et peut être utilisé dans tous les navigateurs.
BabelJS a la capacité de transpiler pour prendre la prochaine version à venir de JavaScript - ES6, ES7, ESNext, etc.
BabelJS peut être utilisé avec gulp, webpack, flow, react, dactylographié, etc., ce qui le rend très puissant et peut être utilisé avec de gros projets, ce qui facilite la vie du développeur.
BabelJS fonctionne également avec la syntaxe React JSX et peut être compilé sous forme JSX.
BabelJS prend en charge les plugins, les polyfills, babel-cli qui facilite le travail avec de grands projets.
Inconvénients de l'utilisation de BabelJS
Dans cette section, nous allons découvrir les différents inconvénients de l'utilisation de BabelJS -
Le code BabelJS modifie la syntaxe lors du transpilage, ce qui rend le code difficile à comprendre lorsqu'il est publié en production.
Le code transpilé est plus volumineux que le code d'origine.
Tous les ES6 / 7/8 ou les nouvelles fonctionnalités à venir ne peuvent pas être transpilés et nous devons utiliser polyfill pour qu'il fonctionne sur les anciens navigateurs.
Voici le site officiel de babeljs https://babeljs.io/.
