Vous écrivez du TypeScript, mais aucun navigateur ne lit le TypeScript. Vous écrivez du JSX, mais aucun moteur ne connaît cette syntaxe. Entre les deux, une étape traduit ce que vous tapez en ce que la machine accepte.
Cette étape porte un nom, et comprendre ce qu'elle fait exactement évite de lui attribuer des pouvoirs qu'elle n'a pas.
Définition
La transpilation est la traduction d'un code source vers un autre code source de niveau comparable, lisible par un humain. Elle se distingue de la compilation classique, qui produit du code machine ou un format intermédiaire que personne ne relit.
// Source, écrite aujourd'hui
const lignes = panier.map(({ prix, quantite }) => prix * quantite);
const total = lignes.reduce((somme, valeur) => somme + valeur, 0);
// Résultat transpilé pour un moteur ancien
var lignes = panier.map(function (ligne) {
return ligne.prix * ligne.quantite;
});
var total = lignes.reduce(function (somme, valeur) {
return somme + valeur;
}, 0);Le comportement est identique, l'écriture non. C'est toute la promesse de l'opération : écrire dans la version du langage qui vous convient, livrer celle que le public sait exécuter.
Ne pas la confondre avec ses voisines
| Opération | Ce qu'elle change |
|---|---|
| Transpilation | La syntaxe, pas le comportement |
| Minification | La taille du fichier, pas la syntaxe autorisée |
| Polyfill | Ajoute une fonction manquante à l'exécution |
| Empaquetage | Le nombre de fichiers servis |
Les quatre s'enchaînent souvent dans le même build, ce qui explique qu'on les confonde. Elles répondent pourtant à quatre problèmes différents, et un bug ne se règle que dans la bonne case.
La transpilation ne rattrape jamais une méthode absente du moteur. Traduire une Fonction fléchée en fonction classique, oui ; faire apparaître Object.groupBy dans un navigateur qui l'ignore, non. Cette limite explique la moitié des erreurs constatées en production sur d'anciens appareils.
Ce qu'elle coûte
Le code livré n'est plus celui que vous avez écrit. Une erreur remontée par un visiteur pointe donc une ligne inconnue, et seul un fichier de Source map permet de revenir à la source d'origine.
Le poids augmente également : plus la cible est ancienne, plus les réécritures sont verbeuses. Régler la liste des navigateurs visés au plus juste est le geste qui rapporte le plus, bien avant d'optimiser son propre code.
Questions fréquentes
Transpilation ou compilation, quel mot employer ?
Les deux circulent, et l'usage a tranché en faveur du second dans beaucoup d'outils, qui parlent simplement de compilateur. Le mot transpilation garde l'avantage d'être précis : il dit que l'entrée et la sortie sont deux codes sources destinés au même type de machine.
Faut-il transpiler ses dépendances ?
En général non, car les paquets publiés sont déjà distribués dans une version compatible, et les traiter à nouveau ralentit énormément le build. C'est précisément pourquoi les configurations excluent le dossier node_modules. Le cas contraire existe, pour une bibliothèque publiée en syntaxe très récente.
Comment savoir si mon code a besoin d'être transpilé ?
En partant du public réel plutôt que d'une intuition : les statistiques de votre site indiquent les navigateurs employés, et une liste de cibles se déduit de là. Écrire du TypeScript impose de toute façon cette étape. Notre formation TypeScript montre comment la chaîne s'articule, de l'annotation de types au fichier finalement servi.