JavaScript
Transpiling

Invoering

Opmerkingen

Inleiding tot transpiling

Voorbeelden

ES6 / ES2015 tot ES5 (via Babel ) :

Deze syntaxis van ES2015

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

wordt geïnterpreteerd en vertaald naar deze ES5-syntaxis:

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

CoffeeScript naar Javascript (via ingebouwde CoffeeScript-compiler) :

Deze CoffeeScript

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

wordt geïnterpreteerd en vertaald naar Javascript:

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

Hoe transpireer ik?

De meeste compileer-naar-Javascript-talen hebben een ingebouwde transpiler (zoals in CoffeeScript of TypeScript). In dit geval moet u mogelijk de transpiler van de taal inschakelen via configuratie-instellingen of een selectievakje. Geavanceerde instellingen kunnen ook worden ingesteld met betrekking tot de transpiler.

Voor ES6 / ES2016-naar-ES5 transpiling is de meest gebruikte transpiler Babel .

Waarom zou ik transpillen?

De meest genoemde voordelen zijn:

• De mogelijkheid om betrouwbaarder een nieuwere syntaxis te gebruiken
• Compatibiliteit tussen de meeste, zo niet alle browsers
• Gebruik van ontbrekende / nog geen native functies voor Javascript via talen zoals CoffeeScript of TypeScript

Gebruik ES6 / 7 met Babel

Browserondersteuning voor ES6 groeit, maar om zeker te zijn dat uw code werkt in omgevingen die deze niet volledig ondersteunen, kunt u Babel gebruiken , de ES6 / 7 tot ES5-transpiler, probeer het eens!

Als u ES6 / 7 in uw projecten wilt gebruiken zonder u zorgen te maken over compatibiliteit, kunt u Node en Babel CLI gebruiken

Snelle installatie van een project met Babel voor ES6 / 7-ondersteuning

1. Download en installeer Node
2. Ga naar een map en maak een project met uw favoriete opdrachtregelprogramma

~ npm init

3. Installeer Babel CLI

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

4. Maak een map met scripts om uw .js bestanden op te slaan en vervolgens een map met dist/scripts waarin de volledig compatibele bestanden worden opgeslagen.
5. Maak een .babelrc bestand in de hoofdmap van uw project en schrijf dit erop

{
    "presets": ["es2015"]
}

6. Bewerk uw package.json bestand (gemaakt toen u npm init ) en voeg het build script toe aan de eigenschap scripts :

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

7. Veel plezier met programmeren in ES6 / 7
8. Voer de volgende stappen uit om al uw bestanden naar ES5 over te brengen

~ npm run build

Voor complexere projecten wilt u misschien een kijkje nemen op Gulp of Webpack