JavaScript => Transpiling

Introduktion

Transpiling är processen för att tolka vissa programmeringsspråk och översätta det till ett specifikt målspråk. I detta sammanhang kommer transpilering att ta kompilering till JS-språk och översätta dem till målspråket i Javascript.

Anmärkningar

Transpiling är processen för att konvertera källkod till källkod, och detta är en vanlig aktivitet i JavaScript-utveckling.

Funktionerna som finns i vanliga JavaScript-applikationer (Chrome, Firefox, NodeJS osv.) Ligger ofta efter de senaste ECMAScript-specifikationerna (ES6 / ES2015, ES7 / ES2016, etc.). När en specifikation har godkänts kommer den med säkerhet att finnas tillgänglig i framtida versioner av JavaScript-applikationer.

I stället för att vänta på nya JavaScript-utgivningar, kan ingenjörer börja skriva kod som kommer att fungera i framtiden (framtidssäkra) genom att använda en kompilator för att konvertera kod som är skriven för nyare specifikationer till kod som är kompatibel med befintliga applikationer. Vanliga transpiler inkluderar Babel och Google Traceur .

Transpilers kan också användas för att konvertera från ett annat språk som TypeScript eller CoffeeScript till vanligt "vanilj" JavaScript. I detta fall konverterar omvandling från ett språk till ett annat språk.

Introduktion till Transpiling

exempel

ES6 / ES2015 till ES5 (via Babel ) :

Denna ES2015-syntax

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

tolkas och översätts till denna ES5-syntax:

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

CoffeeScript to Javascript (via inbyggd CoffeeScript-kompilator) :

Denna CoffeeScript

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

tolkas och översätts till Javascript:

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

Hur transpilerar jag?

De flesta kompilera-till-Javascript-språk har en inbyggd transpilerare (som i CoffeeScript eller TypeScript). I det här fallet kanske du bara behöver aktivera språkets transpilerare via konfigurationsinställningar eller en kryssruta. Avancerade inställningar kan också ställas in i förhållande till transpileraren.

För ES6 / ES2016-till-ES5-transpilering är den mest framträdande transpileraren som används Babel .

Varför ska jag transpilera?

De mest citerade fördelarna inkluderar:

Möjligheten att använda nyare syntax pålitligt
Kompatibilitet bland de flesta, om inte alla webbläsare
Användning av saknade / ännu inte ursprungliga funktioner i Javascript via språk som CoffeeScript eller TypeScript

Börja använda ES6 / 7 med Babel

Webbläsarsupport för ES6 växer, men för att vara säker på att din kod fungerar i miljöer som inte helt stöder den kan du använda Babel , ES6 / 7 till ES5-transpileraren, prova det!

Om du vill använda ES6 / 7 i dina projekt utan att behöva oroa dig för kompatibilitet kan du använda Node och Babel CLI

Snabbinställning av ett projekt med Babel för ES6 / 7-stöd

Ladda ner och installera Node
Gå till en mapp och skapa ett projekt med ditt favoritkommandon

~ npm init

Installera Babel CLI

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

Skapa en scripts mapp för att lagra dina .js filer, och sedan en dist/scripts mapp där transpiled fullt kompatibla filer sparas.
Skapa en .babelrc fil i rotmappen för ditt projekt och skriv den på den

{
    "presets": ["es2015"]
}

Redigera din package.json fil (skapad när du körde npm init ) och lägg till build skriptet till scripts :

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

Njut av programmering i ES6 / 7
Kör följande för att transportera alla dina filer till ES5

~ npm run build

För mer komplexa projekt kanske du vill titta på Gulp eller Webpack

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

JavaScript
Transpiling

Sök…