Articles /

Kom godt i gang med Babel 7

JavaScript er enestående på grund af bredden af økosystemet. Mens nye standarder tilføjer syntaktisk sukker, tager det tid at få dem understøttet i browsere. Babel arbejder uden om dette problem via automatisk transpilation.

Tanken bag produktet er enkel: Babel tager ES6- eller ES7-kode ind og erstatter nye syntaktiske elementer med emuleringskode. Dens output bekræfter den klassiske JavaScript-syntaks og kører på ældre browsere som Internet Explorer.

Babels første udgivelse tog verden med storm. Kort efter, at det først dukkede op, omfavnede forskellige frameworks som React, Vue og Ember det. Udviklere bruger ofte produktet uden at vide, at det arbejder i baggrunden – mere end ét populært npm-projekt har en afhængighed af Babel.

  • Sådan laver du en app

Disse afhængigheder forvandlede udgivelsesprocessen af forgængeren til en konfliktfyldt affære. Version 7, der stadig blev administreret af et lille vedligeholdelseshold, forsøgte derfor at være så kompatibel som muligt. Breaking changes er få og langt fra hinanden, mens kvaliteten af kodegenerering forbliver høj (hvis du arbejder sammen med et team, vil det hjælpe jer med at holde sammenholdet ved at gemme dokumenter i skylagring).

Hvis du ikke har arbejdet med Babel før, så lad dette være din guide. At kunne bruge avancerede JavaScript-funktioner uden kompatibilitetsbekymringer gør livet meget lettere.

Vil du gerne have nogle værktøjer til at strømline din proces? Vores guide til den bedste webside builder vil hjælpe dig. Vil du have langsigtet support? Få den rigtige webhosting-tjeneste.

Versionskontrol

Babel bor normalt i Node-køremiljøet. Lad os starte med at tjekke de anvendte versioner. Outputtet giver den versionsstatus, der er fundet på den Ubuntu 14.04-arbejdsstation, der blev brugt til at oprette den følgende artikel. Dette er ikke pedanteri – figuren, der ledsager dette trin, viser, at Babel-holdet har droppet understøttelsen af en hel del Node.js-versioner.

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

Ændring af pakkenavne

En brydende ændring i version 7 har betydet, at Babel-pakkerne er flyttet ind i deres eget navnerum. Ældre pakker blev ikke fjernet fra de forskellige repositories. Dette er vigtigt, da brugen af ældre pakkenavne fører til den situation, der er vist i figuren, der ledsager dette trin. 

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ædet ovenfor forudsætter, at du arbejder inde i et npm-projekt. I det tilfælde er det nemt at køre Babel via byggehandlingen. Åbn package.json og modificer den som vist i koden nedenfor:

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

Transpile kode i hånden

At sætte Babel i gang indebærer at affyre build-aktionen. Dette gøres bedst via kommandoen npm run. Værdien -d informerer Babel om, at resultaterne skal placeres i lib-mappen – figuren, der ledsager dette trin, viser, at mappen oprettes 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.

Et spørgsmål om konfiguration

Invokering af Babel uden yderligere konfigurationsindstillinger muliggør ikke transpilering. Kode kan kun transpileres, hvis rammen modtager yderligere oplysninger om målmiljøet. Dette kan gøres via en kommandolinjeparameter eller ved at oprette en fil kaldet .babelrc i projektroden.

Konfigurer babelrc

Babel konfigurerer sig selv via et sæt plugins, som hver især anvender transpileringstransformationer på kodebasen. Vi bruger preset-env-pakken – den leveres med et forudkonfigureret sæt transformationer, der er beregnet til at dække de fleste baser.

{"presets": }

Tid til en testkørsel

Føj en smule new-age JavaScript til index.js for at teste programmet mod noget levende kode. Koden, der ledsager dette trin, ville ikke fungere på ældre browsere – når det er gjort, bliver den implicitte funktion erstattet med en normal deklaration, som vist i figuren. 

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

Justér målretning

preset-env anvender de fleste transpileringer som standard: produktets mål er at skabe universelt kompatibelt JavaScript uden hensyn til omkostninger til båndbredde og ydeevne. Du kan ændre dens konfiguration ved at sende et targets-objekt – eksemplet nedenfor er målrettet specifikke versioner af Chrome og IE.

{"presets": ]}

Advanced targeting

Babels browser-målretning er ikke begrænset til Chrome og Internet Explorer. Takket være samarbejdet med browserslist kan udviklere blande og matche fra mere end et dusin mål, som vist nedenfor.

Navnene er ikke følsomme over for store og små bogstaver:

  • Android for Android WebView.
  • Baidu for Baidu Browser.
  • BlackBerry eller bb for Blackberry-browser.
  • Chrome for Google Chrome.
  • ChromeAndroid eller and_chr for Chrome for Android.
  • Edge for Microsoft Edge.
  • Electron for Electron-ramme. Den vil blive konverteret til Chrome-versionen.
  • Explorer eller ie for Internet Explorer.
  • ExplorerMobile eller ie_mob for Internet Explorer Mobile.
  • Firefox eller ff for Mozilla Firefox.
  • FirefoxAndroid eller and_ff for Firefox for Android.
  • iOS eller ios_saf for iOS Safari.
  • Node for Node.js.Opera for Opera.
  • OperaMini eller op_mini for Opera Mini.
  • OperaMobile eller op_mob for Opera Mobile.
  • QQAndroid eller and_qq for QQ Browser for Android.
  • Safari for desktop Safari.
  • Samsung for Samsung Internet.
  • UCAndroid eller and_uc for UC Browser for Android.

Advanced targeting, del to

Browserlisten kan også tage imod avancerede forespørgsler. Dens hjemmeside indeholder en liste over konfigurationsindstillingerne, hvoraf næsten alle også kan bruges inde i Babel ved at ændre babelrc. Forespørgsler kan evalueres lokalt, hvis din arbejdsstation har npx installeret.

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

Automatisk transpilation

Automatisk transpilation

Det bliver hurtigt trættende at skulle påkalde Babel i hånden. Hjælpeprogrammet nodemon overvåger filsystemressourcerne og affyrer kommandoer, når der registreres ændringer. I teorien håndteres tilføjelse af nodemon-understøttelse via en lille ændring i package.json.

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

Tjek for tilstedeværelse

Nogle arbejdsstationer har nodemon installeret globalt. Hvis dette ikke er tilfældet, vil en påkaldelse af programmet give en fejlmeddelelse svarende til den nedenfor viste. Heldigvis er det nemt at installere nodemon via kommandoen npm install. 

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

Kontroller funktionalitet

Før npm start i et terminalvindue, og fortsæt med at ændre indholdet af index.js med en editor som gedit eller Visual Studio Code. Når du har gemt, vil nodemon udsende statusoplysninger.

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

Fix transpilation

Mens nodemon’s registrering burde fungere fejlfrit på dette tidspunkt, opdateres indholdet af filen index.js, der findes i lib, ikke. Dette skyldes en finesse i babel-node – den overfører ikke de transpilerede filer til disken. Den affyrer i stedet en modificeret version af Node CLI, som arbejder med de transpilerede filer.

Transpilér kode programmatisk

Babel er ikke begrænset til at arbejde på kommandolinjen. Hvis de korrekte pakker er installeret, kan kode også transpileres fra et andet program. Det uddrag, der ledsager dette trin, anvender et sæt grundlæggende transformationer på en inputstreng. Husk på, at konfigurationsindstillingerne normalt hentes fra 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;});

Transpilér hele filer

Kildekode bliver normalt ikke gemt i strengvariabler. Babel-API’en tager højde for dette via et sæt filrelaterede funktioner, som giver afkald på inputstrengen til fordel for en variabel med et filnavn. Resultaterne bliver dog returneret som en normal JavaScript-variabel.

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

Synkron og asynkron

Babel 7 introducerede synkrone og asynkrone versioner af de fleste API-kald. Sørg for at vælge den rigtige til dine behov – mens transpilering af små eksempler kan ske i farten, kan det at sætte Babel løs på mere komplekse filer let føre til forsinkelser på snesevis af sekunder.

Lær om individuelle plugins

Hvis du nogensinde skulle undre dig over, hvad der sker i baggrunden, skal du blot besøge denne side. Den indeholder en liste over alle plugins, der i øjeblikket er indeholdt i Babel-distributionen, og den indeholder også et par tips til alle dem, der ønsker at oprette deres eget plugin.

Strip TypeScript-specifikke ting ud

Babel er ikke begrænset til at transpile nymodens JavaScript-elementer. Produktet indeholder en TypeScript-motor med begrænsede funktioner. Den stripper typningsoplysninger ud og erstatter avancerede elementer. Desværre udfører Babel ikke typekontrol – dette eliminerer en af de vigtigste fordele ved TypeScript-sproget.

{"presets": }

Kør Babel online

Selv om transpileringsoperationerne normalt fungerer gnidningsløst, opstår der nogle gange problemer. I det tilfælde er Babel REPL en hjælp. Den kører Babel i browseren på din arbejdsstation og viser input og output lige ved siden af hinanden.

Lær om smertepunkter

Vores indledning forklarede, at Babel ser udbredt brug på tværs af forskellige projekter. Babels maintainer-team forenkler versionsopgraderinger med en detaljeret ændringslogbog. Hvis du bruger Babel programmatisk, skal du ikke glemme at konsultere API-opgraderingsvejledningen.

Denne artikel blev oprindeligt offentliggjort i nummer 283 af det kreative webdesignmagasin Web Designer. Køb nummer 283 her eller abonnér på Web Designer her.

  • Sådan koder du hurtigere og lettere JavaScript
  • 5 fantastiske Javascript API’er
  • 27 hjemmesideskabeloner i topklasse

Leave a Reply