Transpilation : ce que c'est, processus et outils de transformation de code

Qu'est-ce que la transpilation ?

Transpilation (compilation source-à-source) est le processus de traduction d'un programme d'un langage de programmation à un autre tout en conservant le même niveau d'abstraction. Un transpileur prend du code source dans le langage A et génère du code équivalent dans le langage B qui peut être exécuté dans l'environnement cible. Exemples typiques : TypeScript en JavaScript, SASS en CSS, Haxe en plusieurs langages cibles.

La transpilation diffère de la compilation car le code de sortie reste à un haut niveau et peut être lu par des humains (bien que ce ne soit pas son but). Un compilateur (GCC, LLVM, javac) traduit le code en code machine ou bytecode — un format illisible. Un transpileur génère du code qui peut être ensuite compilé ou minifié.

Pourquoi la transpilation est nécessaire. La raison principale est la compatibilité. Les développeurs veulent utiliser des langages modernes (TypeScript avec types, Kotlin avec null safety), mais la plateforme cible ne supporte que JavaScript ou Java. La transpilation permet d'écrire dans un langage moderne tout en déployant un code compréhensible pour l'environnement cible.

Transpileurs populaires

Transpilation vs compilation : différences clés

Niveau d'abstraction est la principale différence. Un transpileur traduit le code entre des langages du même niveau (haut niveau → haut niveau). Un compilateur traduit d'un haut niveau vers un bas niveau (code machine, bytecode). LLVM IR est une représentation intermédiaire mais reste à un niveau inférieur au C++ ou Rust d'origine.

Lisibilité du résultat est la deuxième différence. Le résultat de la transpilation (JavaScript à partir de TypeScript) est lisible et peut être débogué dans le navigateur. Le résultat de la compilation (code machine à partir de C++) n'est pas destiné à la lecture — son analyse nécessite un désassembleur. Les source maps aident à déboguer le code transpilé en le reliant au code source original.

Transpilation dans le contexte CI/CD

Dans les pipelines CI/CD, la transpilation est effectuée à l'étape de construction. Pour les projets TypeScript, tsc ou Babel s'exécutent dans un conteneur Docker, génèrent du JavaScript et des source maps, qui sont ensuite minifiés et déployés sur un serveur ou dans un magasin d'applications. Il est important de configurer la mise en cache des résultats de transpilation — tsc --incremental sauvegarde le graphe de dépendances entre les exécutions, réduisant le temps de construction de 30 à 50 %.

Pour les projets mobiles (React Native), la transpilation via Metro Bundler s'exécute sur le serveur CI à chaque publication. Les répertoires de cache (tmp/metro-cache) et les constructions parallèles via --workers accélèrent le processus. GitHub Actions et GitLab CI prennent en charge la mise en cache des répertoires node_modules et .cache entre les exécutions, ce qui est essentiel pour réduire le temps du pipeline.

Vitesse d'exécution diffère également. La compilation en code machine offre des performances maximales. La transpilation conserve la surcharge du niveau d'abstraction : le JavaScript issu de TypeScript s'exécute à la même vitesse que le JavaScript ordinaire. Les optimisations (TypeScript —strict) fonctionnent à l'étape d'analyse, pas à l'exécution.

Scénarios populaires de transpilation

Scénario 1 : TypeScript → JavaScript — le scénario le plus courant. Le développeur écrit du TypeScript avec des types, le compilateur tsc ou Babel supprime les annotations de type et génère du JavaScript pur. Tous les projets Angular et la plupart des projets React (2026) utilisent la transpilation TypeScript. Selon State of JS 2025, 79 % des développeurs interrogés utilisent TypeScript dans leurs projets principaux.

Scénario 2 : Kotlin → JavaScript — utilisé dans Kotlin/JS pour le développement full-stack. Le code Kotlin se compile en JavaScript via le compilateur Kotlin avec IR (Intermediate Representation). Kotlin/JS prend en charge les déclarations typées TypeScript (.d.ts) pour l'intégration avec des bibliothèques JS externes. JetBrains utilise Kotlin/JS dans ses propres produits pour les interfaces web.

Scénario 3 : SASS/SCSS → CSS — transpilation de préprocesseurs CSS. Dart Sass (l'implémentation recommandée) transpile .scss en .css, en développant les mixins, variables, règles imbriquées et fonctions. Ce n'est pas une compilation (CSS reste CSS), mais une transpilation avec extension syntaxique.

Comparaison : Transpilation vs Compilation vs Interprétation

Babel : transpilation du JavaScript moderne

Babel est le transpileur JavaScript le plus populaire, convertissant le code ES6+/ESNext en JavaScript compatible ES5. Babel fonctionne via un système de plugins et de presets : chaque plugin est responsable d'une transformation (fonctions fléchées, async/await, optional chaining). @babel/preset-env détermine automatiquement les plugins nécessaires en fonction des navigateurs cibles (browserslist).

L'architecture de Babel comprend trois étapes : analyse (parsing) → transformation → génération. L'analyseur (Babylon/@babel/parser) convertit le code source en un AST (Abstract Syntax Tree). Les transformateurs (plugins) modifient l'AST. Le générateur (@babel/generator) produit le code de sortie à partir de l'AST modifié.

Exemple : transpilation avec Babel

// Code ES6+ original
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// Après Babel (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel a transformé : la fonction fléchée en expression de fonction, le paramètre par défaut (name = « World ») en vérification void 0, le template string en concaténation, la classe en fonction constructrice et l'optional chaining (?.) en une chaîne d'opérateurs ternaires. const a été remplacé par var pour la compatibilité ES5.

TypeScript : transpilation avec système de types

TypeScript est un langage fortement typé qui se transpile en JavaScript. Le compilateur tsc (TypeScript Compiler) effectue deux tâches : la vérification de types (type checking) et la transpilation (emit). Il est important de comprendre : la vérification de types et la transpilation sont des étapes indépendantes. Vous pouvez exécuter la transpilation sans vérification de types (--noEmitOnError false) ou vérifier les types sans génération de code (--noEmit true).

Transpilation TypeScript supprime toutes les annotations de type, interfaces, alias de type et paramètres génériques — ils n'existent pas en JavaScript. Les Enum sont convertis en objets, les décorateurs en appels de fonction, async/await en générateurs (si target est inférieur à ES2017). tsconfig.json contrôle target (version de JavaScript), module (système de modules), strict (rigueur de la vérification de types) et outDir (dossier de sortie).

Configuration TypeScript pour la transpilation

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: « es2015 » indique à tsc de générer du JavaScript avec la syntaxe ES6 (fonctions fléchées, classes, let/const). module: « esnext » préserve les modules ES (import/export) pour le Tree Shaking ultérieur dans Webpack. strict: true active toutes les vérifications de types (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true génère des fichiers .d.ts pour les consommateurs TypeScript de la bibliothèque.

Transpilation dans le développement mobile

React Native utilise Babel et Metro pour transpiler le JavaScript/TypeScript en code exécutable par JavaScriptCore (iOS) ou Hermes (Android). Les plugins Babel ajoutent la transformation JSX, les annotations Flow/TypeScript et les optimisations spécifiques à React Native. Metro Bundler regroupe en outre les modules et effectue le Hot Module Replacement pour le développement.

Flutter utilise la transpilation Dart. Pour Flutter Web, dart2js transpile Dart en JavaScript optimisé. Pour Flutter Mobile, dart2native compile Dart en code ARM natif. Flutter prend également en charge Dart DevCompiler (dartdevc) pour le développement — il transpile Dart en JavaScript plus rapidement mais avec moins d'optimisation.

Exemple : Configuration Babel pour React Native

// babel.config.js — Transpilation React Native
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset inclut tous les plugins nécessaires pour React Native : JSX, Flow/TypeScript, le système de modules Metro, async/await, les propriétés de classe et les décorateurs. Le plugin module-resolver ajoute des alias pour les importations courtes (@/components/Button au lieu de ../../components/Button). En mode production, transform-remove-console supprime tous les console.log du code.