Kom igång med Babel 7

Javascript är unikt på grund av ekosystemets bredd. Medan nya standarder lägger till syntaktigt socker, tar de dem som stöds på webbläsare. Babel arbetar kring detta problem via automatisk transpilering.

Tanken bakom produkten är enkel: Babel tar i ES6 eller ES7-kod och ersätter nya syntaktiska element med emuleringskod. Dess utgång bekräftar till Classic Javascript-syntax och körs på äldre webbläsare som Internet Explorer.

Babels första release tog världen med storm. Strax efter det att det först uppträdde, omföll olika ramar som reagera, vue och Ember det. Utvecklare använder ofta produkten utan att veta att det fungerar i bakgrunden - mer än ett populärt NPM-projekt har ett beroende av Babel.

• Hur man gör en app

Dessa beroenden omvandlade förlossningsprocessen för föregångaren till en konfliktfruktig affär. Version 7, som fortfarande hanteras av ett litet underhållsteam, försökte således vara lika kompatibelt som möjligt. Att bryta förändringar är få och långt ifrån, medan kodgenereringskvalitet är fortsatt hög (om du arbetar med ett lag, spara dokument i molnlagring hjälper dig att hålla sig sammanhängande).

Om du inte har jobbat med Babel innan, låt det vara din guide. Att kunna använda avancerade JavaScript-funktioner utan kompatibilitetsfrågor gör livet mycket enklare.

Vill du ha några verktyg för att effektivisera din process? Vår guide till det bästa Website Builder kommer att hjälpa. Vill du ha långsiktigt stöd? Få rätt webbhotell service.

01. Versionskontroll

Babel bor vanligtvis i noden runtime-miljö. Låt oss börja med att kontrollera de använda versionerna. Utgången ger versionsläget på Ubuntu 14.04-arbetsstationen som används för att skapa följande artikel. Det här är inte pedantry - figuren som åtföljer detta steg visar att Babel-laget släppte stöd för en hel del node.js-versioner.

 Tamhan @ Tamhan-ThinkPad: ~ $ node --version
v8.14.0
Tamhan @ Tamhan-ThinkPad: ~ $ npm - version
6.4.1 

02. Byte av paketnamn

En brytningsförändring i version 7 har involverat att flytta Babel-paketet till sin egen namnrymd. Äldre paket togs inte bort från de olika repositorierna. Detta är viktigt, eftersom användningen av äldre paketnamn leder till den situation som visas i figuren som åtföljer detta steg.

 Tamhan @ Tamhan-ThinkPad: ~ / Arbetspaceb7 $ npm
Installera --Save-dev @ Babel / Core @ Babel / Cli @
Babel / Preset-Env @ Babel / Node
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ Babel / Cli @ 7.2.0
+ @ Babel / Preset-Env @ 7.2.0 

03. Lägg till en byggnadsåtgärd

Steget ovan förutsätter att du arbetar inuti ett NPM-projekt. I så fall är det lätt att köra Babel via byggnadsåtgärden. Öppen paket.json och modifiera det som demonstreras i koden nedan:

 {
. . .
"Main": "index.js",
"Skript": {
"Test": "Echo \" -fel: inget test
specificerad \ "& amp; & amp; Exit 1",
"Bygg": "Babel index.js -d lib"

}, 

04. Transpile kod för hand

Att sätta Babel till jobbet innebär att skjuta av byggnaden. Detta uppnås bäst via NPM-körkommandot. De -d värde informerar Babel att resultaten måste placeras i lib Mapp - figuren som åtföljer detta steg visar att mappen skapas på flugan.

 Tamhan @ Tamhan-ThinkPad: ~ / Arbetspaceb7 $ npm
springa upp
& gt; [email protected] Bygg / Hem / Tamhan /
WorksPaceb7
& gt; Babel index.js -d lib
Framgångsrikt sammanställt 1 fil med Babel. 

05. En fråga om konfiguration

Att åberopa Babel utan ytterligare konfigurationsalternativ aktiverar inte överföring. Koden kan endast överföras om ramverket får ytterligare information om målmiljön. Detta kan göras via en kommandoradsparameter, eller genom att skapa en fil som heter .babelrc i projektroten.

06. Konfigurera BabelRC

Babel konfigurerar sig via en uppsättning plugins, som alla tillämpar transpileringstransformationer till kodbasen. Vi använder Förinställd-Env Paket - Den levereras med en förkonfigurerad uppsättning transformationer avsedda att täcka de flesta baser.

 {
"Förinställningar": ["@ Babel / Preset-Env"]
} 

07. Tid för en provkörning

Lägg till lite ny ålder javascript för att index.js för att testa programmet mot någon levande kod. Koden som åtföljer detta steg skulle inte fungera på äldre webbläsare - när det är gjort, blir den implicita funktionen ersatt med a vanligt Deklaration, som visas i figuren.

funktion tammestest () {
[1, 2, 3] .Map ((n) = & gt; n + 1);
} 

08. Justera inriktningen

Förinställd-Env Gäller de flesta transpileringar som standard: Produktens mål är att skapa universellt kompatibelt Javascript utan hänsyn till bandbredd och prestandakostnader. Du kan ändra sin konfiguration genom att passera i a mål Objekt - Exemplet nedan riktar sig till specifika versioner av krom och dvs.

 {
"Förinställningar": [
[
"@ Babel / Preset-Env",
{
"Mål": {
"Chrome": "58",
"IE": "11"
}
}
Anklagelse
Anklagelse
} 

09. Avancerad inriktning

Babels webbläsare är inte begränsad till Chrome och Internet Explorer. Tack vare samarbetet med Browserslist , utvecklare kan blanda och matcha från mer än ett dussin mål, som visas nedan.

Namnen är fall okänsliga:

• Android För Android Webview.
• Baidu för Baidu Browser.
• Björnbär eller bb för Blackberry Browser.
• Krom för Google Chrome.
• Kromeandroid eller and_chr För Chrome för Android.
• Kant för Microsoft Edge.
• Elektron för elektronram. Det kommer att omvandlas till Chrome-versionen.
• Utforskare eller dvs för Internet Explorer.
• Explorermobil eller IE_MOB För Internet Explorer Mobile.
• Fyrfox eller ff för Mozilla Firefox.
• Firefoxandroid eller and_ff För Firefox för Android.
• ios eller ios_saf för iOS Safari.
• Nod för node.js.opera för opera.
• Opotamini eller op_mini för opera mini.
• Opotamobil eller op_mob för Opera Mobile.
• Qqandroid eller and_qq För QQ-webbläsare för Android.
• Safari för skrivbordsafari.
• Samsung För Samsung Internet.
• Ucandroid eller and_uc För UC-webbläsare för Android.

10. Avancerad inriktning, del två

Browserlist kan också ta avancerade frågor. Dess hemsida Listar konfigurationsalternativen, nästan alla kan också användas inom Babel genom att ändra babellrc . Frågor kan utvärderas lokalt om din arbetsstation har NPX installerad.

 {
"Mål": "& GT; 0,25%, inte död"
} 

11. Automatisk transpilering

Att behöva åberopa Babel för hand blir tråkigt snabbt. NoDemon-verktyget övervakar filsystemresurser och bränner avkommandon som ändringar blir upptäckta. I teorin hanteras att lägga till nodemonstöd via en liten förändring till paket.json .

 {
"Namn": "WorksPaceb7",
. . .
"Main": "index.js",
"Skript":
{
"Start": "nodemon --exec babel-nod
index.js ", 

12. Kontrollera efter närvaro

Vissa arbetsstationer har nodemon installeras globalt. Om så inte är fallet kommer det att åberopa programmet att ge ett felmeddelande som liknar det som visas nedan. Lyckligtvis utplacera nodemon uppnås enkelt via npm installera kommando.

 Tamhan @ Tamhan-ThinkPad: ~ / Arbetspaceb7 $ npm
Installera --Save-dev nodemon 

13. Kontrollera funktionalitet

Avfyra npm start i ett terminalfönster och fortsätt att ändra innehållet i index.js med en redaktör som Gedit eller Visuell studiokod . Efter sparat, nodemon kommer att matas ut statusinformation.

 [nodemon] omstart på grund av förändringar ...
[nodemon] Starta `Babel-node index.js`
[nodemon] Clean Exit - Väntar på ändringar
Innan du startar om 

14. Fixa transpilering

Medan nodemon Detektion bör fungera felfritt vid denna tidpunkt, innehållet i index.js fil som finns i lib Uppdatera inte. Detta orsakas av en trevlig av babel-nod - Det förbinder inte de överförda filerna till disken. Det brinner istället av en modifierad version av noden CLI, som fungerar med de överförda filerna.

15. Transpileringskod programmetiskt

Babel är inte begränsat till att arbeta på kommandoraden. Om de korrekta paketen är installerade kan koden också överföras från ett annat program. Snippet som åtföljer detta steg tillämpar en uppsättning grundläggande transformationer till en ingångssträng. Tänk på att konfigurationsinställningarna, vanligtvis, erhålls från a babellrc fil.

 Var Babel = Kräv ("@ Babel / Core");
Importera {Transform} från "@ Babel / Core";
Importera * som Babel från "@ Babel / Core";
Babel.transform ("Kod ();", Alternativ,
funktion (fel, resultat) {
resultat.Code;
resultat.map;
resultat.ast;
}); 

16. Transpile hela filer

Källkoden blir vanligtvis inte lagrad i strängvariabler. Babel API står för detta via en uppsättning filrelaterade funktioner, som avges inmatningssträngen för en variabel med ett filnamn. Resultaten får dock återlämnas som en vanlig JavaScript-variabel.

 Babel.transformfile ("filename.js", alternativ,
funktion (fel, resultat) {
resultat; // = & gt; {kod, karta, ast}
}
); 

17. Synkronisering och Async

Babel 7 introducerade synkrona och asynkrona versioner av de flesta API-samtal. Se till att du väljer den rätta för dina behov - samtidigt som det kan överföra små exempel kan man göra det, inställningen av Babel Loose på mer komplexa filer kan enkelt leda till förseningar som går i dussintals sekunder.

18. Lär dig om enskilda plugins

Skulle du någonsin hitta dig själv undrar vad som händer i bakgrunden, besök bara denna sida . Det ger en lista över alla plugins som för närvarande finns i Babeldistributionen, och innehåller också några tips för alla som försöker skapa ett eget plugin.

19. Strip Out Typescript-specifika

Babel är inte begränsat till att transpilera Javascript-element i New Age. Produkten innehåller en funktionsbegränsad typskriptmotor. Det remsar ut att skriva information och ersätter avancerade element. Tyvärr utför Babel inte typkontroll - det här eliminerar en av de mest signifikanta fördelarna med Typescript-språket.

 {
"Förinställningar": ["@ Babel / Preset-Typescript"]
} 

20. Kör Babel online

Medan transpileringsverksamheten vanligtvis fungerar smidigt, uppstår problem ibland. I så fall, Babel Repl är till hjälp. Den kör Babel i webbläsaren på din arbetsstation och visar inmatning och utmatning intill varandra.

21. Lär dig om smärtpunkter

Vår introduktion förklarade att Babel ser utbredd användning över olika projekt. Babels underhållsteam förenklar versionsuppgraderingar med a Detaljerad förändringslogg . Om du använder Babel programmatiskt, glöm inte att konsultera API Upgrade Guide .

Den här artikeln publicerades ursprungligen i utgåva 283 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 283 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• Hur man kodar snabbare, lättare javascript
• 5 Awesome JavaScript API
• 27 Top Class Website Mallates