JavaScript
Transpiling

Introduction

Remarques

Introduction à la transpolation

Exemples

ES6 / ES2015 à ES5 (via Babel ) :

Cette syntaxe ES2015

// ES2015 arrow function syntax 
[1,2,3].map(n => n + 1); 

est interprété et traduit selon la syntaxe ES5:

// Conventional ES5 anonymous function syntax 
[1,2,3].map(function(n) {   
    return n + 1; 
});

CoffeeScript to Javascript (via le compilateur CoffeeScript intégré) :

Ce CoffeeScript

# Existence:
alert "I knew it!" if elvis?

est interprété et traduit en Javascript:

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

Comment est-ce que je transpile?

La plupart des langages compilables sur Javascript ont un transpiler intégré (comme dans CoffeeScript ou TypeScript). Dans ce cas, il vous suffit d'activer le transpiler du langage via les paramètres de configuration ou une case à cocher. Des paramètres avancés peuvent également être définis par rapport au transpiler.

Pour la transpolation ES6 / ES2016-à-ES5 , le transpiler le plus utilisé est Babel .

Pourquoi devrais-je transpiler?

Les avantages les plus cités comprennent:

• La possibilité d'utiliser de nouvelles syntaxes de manière fiable
• Compatibilité entre la plupart, sinon tous les navigateurs
• Utilisation de fonctionnalités manquantes / pas encore natives dans Javascript via des langages tels que CoffeeScript ou TypeScript

Commencez à utiliser ES6 / 7 avec Babel

Le support du navigateur pour ES6 est en pleine croissance, mais pour être sûr que votre code fonctionnera sur des environnements qui ne le supportent pas complètement, vous pouvez utiliser Babel , le transpiler ES6 / 7 à ES5, essayez-le!

Si vous souhaitez utiliser ES6 / 7 dans vos projets sans vous soucier de la compatibilité, vous pouvez utiliser Node et Babel CLI

Mise en place rapide d'un projet avec le support Babel pour ES6 / 7

1. Téléchargez et installez Node
2. Accédez à un dossier et créez un projet à l'aide de votre outil de ligne de commande préféré.

~ npm init

3. Installer Babel CLI

~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015

4. Créez un dossier de scripts pour stocker vos fichiers .js , puis un dossier dist/scripts lequel les fichiers entièrement compatibles transpilés seront stockés.
5. Créez un fichier .babelrc dans le dossier racine de votre projet et écrivez-le dessus

{
    "presets": ["es2015"]
}

6. Modifiez votre fichier package.json (créé lors de l' scripts npm init ) et ajoutez le script de build à la propriété scripts :

{
    ...
    "scripts": {
    ... ,
    "build": "babel scripts --out-dir dist/scripts"
    },
    ...
}

7. Profitez de la programmation en ES6 / 7
8. Exécutez les opérations suivantes pour transférer tous vos fichiers sur ES5

~ npm run build

Pour des projets plus complexes, vous pouvez consulter Gulp ou Webpack