Articles /

Kom igång med Babel 7

JavaScript är unikt på grund av ekosystemets bredd. Medan nya standarder lägger till syntaktiskt socker tar det tid att få dem stödda i webbläsare. Babel kringgår detta problem via automatisk transpilation.

Tanken bakom produkten är enkel: Babel tar in ES6- eller ES7-kod och ersätter nya syntaktiska element med emuleringskod. Dess utdata bekräftar den klassiska JavaScript-syntaxen och körs på äldre webbläsare som Internet Explorer.

Babels första utgåva tog världen med storm. Strax efter att den först dök upp omfamnade olika ramverk som React, Vue och Ember den. Utvecklare använder ofta produkten utan att veta att den arbetar i bakgrunden – mer än ett populärt npm-projekt har ett beroende av Babel.

  • Hur man gör en app

Dessa beroenden förvandlade föregångarens releaseprocess till en konfliktfylld affär. Version 7, som fortfarande förvaltas av ett litet underhållsteam, försökte därför vara så kompatibel som möjligt. Brytande ändringar är få, medan kvaliteten på kodgenereringen förblir hög (om du arbetar med ett team kan du spara dokument i molnlagring för att hålla sammanhållningen uppe).

Om du inte har arbetat med Babel tidigare, låt det här vara din guide. Att kunna använda avancerade JavaScript-funktioner utan kompatibilitetsbekymmer gör livet mycket enklare.

Vill du ha några verktyg för att effektivisera din process? Vår guide till den bästa webbplatsbyggaren kommer att hjälpa dig. Vill du ha långsiktig support? Skaffa rätt webbhotell.

Versionskontroll

Babel bor vanligtvis i Node runtime-miljön. Låt oss börja med att kontrollera vilka versioner som används. I utmatningen visas den versionsstatus som finns på arbetsstationen Ubuntu 14.04 som användes för att skapa följande artikel. Detta är inte pedanteri – figuren som åtföljer detta steg visar att Babel-teamet slopade stödet för en hel del Node.js-versioner.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Förändring av paketnamn

En brytande förändring i version 7 har inneburit att Babel-paketen har flyttats till ett eget namnområde. Äldre paket togs inte bort från de olika förråden. Detta är viktigt eftersom användningen av äldre paketnamn leder till den situation som visas i figuren som åtföljer det här steget.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Add a build action

Stråket ovan förutsätter att du arbetar i ett npm-projekt. I det fallet är det enkelt att köra Babel via byggåtgärden. Öppna package.json och ändra den enligt koden nedan:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transportera kod för hand

Att sätta Babel i arbete innebär att du avfyrar byggåtgärden. Detta görs bäst via kommandot npm run. Värdet -d informerar Babel om att resultaten måste placeras i lib-mappen – figuren som åtföljer detta steg visar att mappen skapas i farten.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

En fråga om konfiguration

Invokering av Babel utan ytterligare konfigurationsalternativ aktiverar inte transpilering. Kod kan endast transpileras om ramverket får ytterligare information om målmiljön. Detta kan göras via en kommandoradsparameter, eller genom att skapa en fil kallad .babelrc i projektroten.

Konfigurera babelrc

Babel konfigurerar sig självt via en uppsättning plugins, som var och en tillämpar transpileringstransformationer på kodbasen. Vi använder paketet preset-env – det levereras med en förkonfigurerad uppsättning transformationer som är avsedda att täcka de flesta baser.

{"presets": }

Dags för en testkörning

Lägg till index.js lite nygammal JavaScript för att testa programmet mot lite levande kod. Koden som följer med det här steget skulle inte fungera i äldre webbläsare – när det är gjort ersätts den implicita funktionen med en vanlig deklaration, vilket visas i figuren.

function tamstest(){.map((n) => n + 1);}

Justera målinriktning

preset-env tillämpar de flesta transpileringar som standard: Produktens mål är att skapa universellt kompatibla JavaScript utan hänsyn till kostnader för bandbredd och prestanda. Du kan ändra konfigurationen genom att skicka in ett targets-objekt – exemplet nedan riktar sig till specifika versioner av Chrome och IE.

{"presets": ]}

Advanced targeting

Babels webbläsarmålning är inte begränsad till Chrome och Internet Explorer. Tack vare samarbetet med browserslist kan utvecklare mixa och matcha från mer än ett dussin mål, vilket visas nedan.

Namnen är okänsliga för stor bokstavsskillnader:

  • Android för Android WebView.
  • Baidu för Baidu Browser.
  • BlackBerry eller bb för Blackberry browser.
  • Chrome för Google Chrome.
  • ChromeAndroid eller and_chr för Chrome för Android.
  • Edge för Microsoft Edge.
  • Electron för Electron framework. Den kommer att konverteras till Chrome-versionen.
  • Explorer eller ie för Internet Explorer.
  • ExplorerMobile eller ie_mob för Internet Explorer Mobile.
  • Firefox eller ff för Mozilla Firefox.
  • FirefoxAndroid eller and_ff för Firefox för Android.
  • iOS eller ios_saf för iOS Safari.
  • Node för Node.js.Opera för Opera.
  • OperaMini eller op_mini för Opera Mini.
  • OperaMobile eller op_mob för Opera Mobile.
  • QQAndroid eller and_qq för QQ Browser för Android.
  • Safari för desktop Safari.
  • Samsung för Samsung Internet.
  • UCAndroid eller and_uc för UC Browser för Android.

Advanced targeting, del två

Browserlist kan också ta emot avancerade frågor. På dess hemsida listas konfigurationsalternativen, varav nästan alla också kan användas i Babel genom att ändra babelrc. Förfrågningar kan utvärderas lokalt om din arbetsstation har npx installerat.

{"targets": "> 0.25%, not dead"}

Automatisk transpilering

Att behöva anropa Babel för hand blir snabbt tråkigt. Verktyget nodemon övervakar filsystemresurser och avfyrar kommandon när förändringar upptäcks. I teorin hanteras tillägg av nodemon-stöd via en liten ändring i package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Kontrollera om nodemon finns

Vissa arbetsstationer har nodemon installerat globalt. Om detta inte är fallet kommer anropandet av programmet att ge ett felmeddelande som liknar det som visas nedan. Lyckligtvis är det enkelt att distribuera nodemon via kommandot npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Kontrollera funktionalitet

Förstör npm start i ett terminalfönster och fortsätt att ändra innehållet i index.js med en editor som gedit eller Visual Studio Code. Efter att ha sparat kommer nodemon att ge ut statusinformation.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Rättar transpilation

Men även om nodemons detektering bör fungera felfritt vid det här laget, uppdateras inte innehållet i filen index.js som finns i lib. Detta orsakas av en finess hos babel-node – den lägger inte in de transpilerade filerna på disken. Den avfyrar istället en modifierad version av Node CLI, som fungerar med de transpilerade filerna.

Transpilera kod programmatiskt

Babel är inte begränsat till att arbeta på kommandoraden. Om rätt paket är installerade kan kod också transpileras från ett annat program. Den utdragsdel som åtföljer det här steget tillämpar en uppsättning grundläggande transformationer på en inmatningssträng. Tänk på att konfigurationsinställningarna, vanligtvis, hämtas från en babelrc-fil.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transportera hela filer

Källkod lagras vanligtvis inte i strängvariabler. Babel API:et tar hänsyn till detta via en uppsättning filrelaterade funktioner, som avstår från inmatningssträngen för en variabel med ett filnamn. Resultaten returneras dock som en vanlig JavaScript-variabel.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Synkron och asynkron

Med Babel 7 infördes synkrona och asynkrona versioner av de flesta API-anrop. Se till att välja rätt för dina behov – medan transpiling av små exempel kan göras i farten kan det lätt leda till fördröjningar på tiotals sekunder om du släpper Babel på mer komplexa filer.

Lär dig mer om enskilda plugins

Om du någon gång undrar vad som händer i bakgrunden är det bara att besöka den här sidan. Den innehåller en lista över alla plugins som för närvarande finns i Babel-distributionen, och innehåller också några tips för alla som vill skapa en egen plugin.

Strip out TypeScript specifics

Babel är inte begränsat till att transpila nygamla JavaScript-element. Produkten innehåller en funktionsbegränsad TypeScript-motor. Den strippar ut typningsinformation och ersätter avancerade element. Tyvärr utför Babel ingen typkontroll – detta eliminerar en av de viktigaste fördelarna med språket TypeScript.

{"presets": }

Kör Babel online

Men även om transpileringsoperationerna vanligtvis fungerar smidigt uppstår ibland problem. I det fallet är Babel REPL till hjälp. Den kör Babel i webbläsaren på din arbetsstation och visar inmatning och utmatning precis bredvid varandra.

Lär dig om smärtpunkter

Vår introduktion förklarade att Babel ser utbredd användning i olika projekt. Babels underhållsteam förenklar versionsuppgraderingar med en detaljerad ändringslogg. Om du använder Babel programmatiskt, glöm inte att konsultera API-uppgraderingsguiden.

Denna artikel publicerades ursprungligen i nummer 283 av den kreativa webbdesigntidningen Web Designer. Köp nummer 283 här eller prenumerera på Web Designer här.

  • Så kodar du snabbare och lättare JavaScript
  • 5 grymma Javascript API:er
  • 27 förstklassiga webbmallar

Leave a Reply