JavaScript
Transpiling

introduzione

Osservazioni

Introduzione al Transpiling

Esempi

ES6 / ES2015 a ES5 (via Babel ) :

Questa sintassi ES2015

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

è interpretato e tradotto in questa sintassi ES5:

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

CoffeeScript to Javascript (tramite il compilatore CoffeeScript incorporato) :

Questo CoffeeScript

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

è interpretato e tradotto in Javascript:

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

Come faccio a transpire?

La maggior parte delle lingue compile-to-Javascript ha un transpiler incorporato (come in CoffeeScript o TypeScript). In questo caso, potrebbe essere sufficiente abilitare il traspolatore della lingua tramite le impostazioni di configurazione o una casella di controllo. Le impostazioni avanzate possono anche essere impostate in relazione al traspolatore.

Per il transpiling ES6 / ES2016-to-ES5 , il transpiler più importante in uso è Babel .

Perché dovrei traspare?

I vantaggi più citati includono:

• La possibilità di utilizzare la sintassi più recente in modo affidabile
• Compatibilità tra la maggior parte, se non tutti i browser
• Utilizzo di funzioni mancanti / non ancora native per Javascript tramite lingue come CoffeeScript o TypeScript

Inizia a utilizzare ES6 / 7 con Babel

Il supporto del browser per ES6 è in crescita, ma per essere sicuro che il tuo codice funzioni su ambienti che non lo supportano completamente, puoi usare Babel , il transpiler ES6 / 7 per ES5, provalo!

Se si desidera utilizzare ES6 / 7 nei propri progetti senza doversi preoccupare della compatibilità, è possibile utilizzare Node e Babel CLI

Configurazione rapida di un progetto con Babel per il supporto ES6 / 7

1. Scarica e installa Nodo
2. Vai a una cartella e crea un progetto usando il tuo strumento a riga di comando preferito

~ npm init

3. Installa Babel CLI

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

4. Crea una cartella di scripts per memorizzare i tuoi file .js , e poi una cartella dist/scripts cui verranno memorizzati i file transpiled pienamente compatibili.
5. Crea un file .babelrc nella cartella principale del tuo progetto e .babelrc sopra

{
    "presets": ["es2015"]
}

6. Modifica il file package.json (creato durante l'esecuzione di npm init ) e aggiungi lo script di build alla proprietà scripts :

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

7. Goditi la programmazione in ES6 / 7
8. Esegui quanto segue per trascrivere tutti i tuoi file su ES5

~ npm run build

Per progetti più complessi potresti dare un'occhiata a Gulp o Webpack