JavaScript est un langage qui évolue très rapidement et parfois nous voulons utiliser ses dernières fonctionnalités, mais si notre navigateur ou notre environnement ne le permet pas directement, nous devrons le transpiler pour qu'il le fasse.
Le transpiling est la transformation du code source écrit dans une langue dans une autre langue avec un niveau d'abstraction comparable. Par conséquent, dans le cas de JavaScript, le transpilateur prend une syntaxe que les anciens navigateurs ne comprennent pas et la transforme en syntaxe qu'ils comprennent.
Polyfilling vs. Transpiler
Les deux méthodes fonctionnent dans le même but: nous pouvons écrire du code qui utilise de nouvelles fonctionnalités qui ne sont pas implémentées dans notre environnement cible, puis appliquer l'une de ces méthodes.
Un polyfill est un morceau de code qui implémente des fonctionnalités modernes afin qu'elles puissent être appliquées pour fonctionner dans les anciennes versions du navigateur.
Transpiling est une combinaison de deux mots: transformer et
compiler. Parfois, une nouvelle syntaxe ne peut pas être implémentée avec des polyfills, auquel cas nous utilisons un transpilateur.
Imaginons que nous utilisons un ancien navigateur qui ne prend pas en charge la fonction Number.isNaNintroduit dans la spécification ES6. Pour utiliser cette fonctionnalité, nous devons créer un polyfill pour cette méthode, mais nous n'en avons besoin que s'il n'est pas déjà disponible dans le navigateur.
Pour ce faire, nous allons créer une fonction qui imite le comportement de la fonction isNaN et l'ajouter à la propriété Number du prototype.
// isNaN
if (!Number.isNan) {// .
Number.prototype.isNaN = function isNaN(n) {
return n !== n;
};
}
let myNumber = 100;
console.log(myNumber.isNaN(100));Nous allons maintenant transpiler le code de la fonction nouvellement créée. Imaginons que la plupart des navigateurs ne puissent pas remplir cette fonction, auquel cas nous ne pouvons pas créer un polyfill pour simuler le comportement. Nous voulons exécuter le code suivant dans Internet Explorer 11, nous allons donc le convertir à l'aide d'un transpilateur:
class mySuperClass {
constructor(name) {
this.name = name;
}
hello() {
return "Hello:" +this.name;
}
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());
//Hello RickLe code résultant a été porté à l'aide du transpilateur en ligne de Babel , et nous pouvons maintenant l'exécuter dans Internet Explorer 11:
"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
function mySuperClass(name) {
_classCallCheck(this, mySuperClass);
this.name = name;
}
_createClass(mySuperClass, [{
key: "hello",
value: function hello() {
return "Hello:" + this.name;
}
}]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello RickL'un des transpileurs JavaScript les plus courants est Babel. Babel est un outil qui a été conçu pour vous aider à porter votre code entre différentes versions de JavaScript et qui peut être installé via le Node Package Manager (npm).
Babel est devenu la norme pour compiler les applications ECMAScript dans une version d'ECMAScript qui fonctionne dans les navigateurs qui ne prennent pas en charge ces applications. Babel peut compiler d'autres versions d'ECMAScript comme React JSX.
Dans les étapes suivantes, nous verrons comment utiliser Babel pour transpiler et exécuter la classe mySuperMethod précédente sur une machine Linux avec l'ancien Node.js installé . Sur d'autres systèmes d'exploitation, tels que Windows 10 ou macOS, les étapes sont similaires.
Remarque. Vous devez avoir Node.js installé sur votre ordinateur . Npm a été ajouté en tant que fonction au programme d'installation de Node.js
1. Ouvrez une invite de commande et créez un répertoire appelé babelExemple:
/mkdir babelExample
/cd babelExample2. Créez un projet npm et laissez les valeurs par défaut. La commande suivante créera un fichier nommé package.json:
npm init
capture d'écran du contenu du fichier package.json après l'exécution de la commande npm init
Ici, index.js (le nom du fichier peut être différent) est le point d'entrée de notre application. C'est là que nous allons mettre notre code javascript, alors créez un fichier index.js et mettez-y le code suivant:
class mySuperClass {
constructor(name) {
this.name = name;
}
hello() {
return "Hello:" +this.name;
}
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());
//Hello Rick3. Bien que nous puissions installer Babel CLI globalement, il est préférable de le faire localement, projet par projet. La commande suivante ajoutera le répertoire node_modules et modifiera le fichier package.json pour ajouter des dépendances Babel:
npm install -save-dev @babel/core @babel/cli
capture d'écran de package.json avec les dépendances babel
4. Ajoutez le fichier de configuration .babelrc au dossier racine de votre projet et incluez les plugins pour les transformations ES2015 +.
Remarque. Dans Babel, chaque transformateur est un plugin que nous pouvons installer individuellement. Chaque préréglage est une collection de plugins associés. En utilisant des préréglages, nous n'avons pas besoin d'installer et de mettre à jour nous-mêmes des dizaines de plugins.
Définir un préréglage pour toutes les fonctionnalités ES6 (contient un groupe de plugins):
npm install @babel/preset-env --save-dev
capture d'écran de package.json avec dépendance babel preset-env
Modifiez le fichier .babelrc et ajoutez la configuration qui inclut les transformations pour ES6.
Écrivez le code suivant dans votre fichier .babelrc:
{
"presets": ["@babel/preset-env"]
}5.
Note d' utilisation . Si vous utilisez Windows 10 PowerShell, soyez prudent lors de l'encodage de vos fichiers car vous pouvez obtenir des erreurs d'analyse lors du démarrage de Babel. Il est souhaitable que les fichiers soient en codage UTF-8.
input: index.js
output: out dossier (Babel laissera les fichiers migrés ici)
Directement en exécutant la commande suivante dans la console:
./node_modules/.bin/babel index.js -d outAvec un script npm ajoutant la ligne suivante à votre fichier package.json:
"build": "babel index.js -d out"
capture d'écran du contenu du fichier package.json après l'ajout du script de construction
Exécutez la commande suivante:
npm run buildDans les deux cas, vous obtenez dans le dossier out un fichier (ou des fichiers) transpilé dans un navigateur prêt à l'emploi qui ne prend pas en charge la syntaxe de classe ES6, le code est:
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
function mySuperClass(name) {
_classCallCheck(this, mySuperClass);
this.name = name;
}
_createClass(mySuperClass, [{
key: "hello",
value: function hello() {
return "Hello:" + this.name;
}
}]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());Conclusion
Le langage JavaScript est en constante évolution, et grâce à ces outils, nous pouvons écrire du code avec une nouvelle syntaxe et de nouvelles fonctionnalités qui ne sont pas encore implémentées dans toutes les versions de navigateurs.
J'espère que vous avez apprécié cet article. J'ai diffusé ceci et de nombreux autres articles utiles pour les développeurs Frontend débutants sur le canal Telegram Frontend.school () , où je prépare également des quiz utiles pour tester mes connaissances. J'attire votre attention sur le fait que la chaîne est purement un passe-temps et un désir d'aider et n'apporte pas d'avantages matériels pour moi.