Kom i gang med Babel 7

Javascript er unikt på grunn av økosystemets bredde. Mens nye standarder legger til syntaktisk sukker, tar de dem støttet på nettlesere. Babel jobber rundt dette problemet via automatisk transpilasjon.

Ideen bak produktet er enkelt: Babel tar i ES6 eller ES7-kode og erstatter nye synaktiske elementer med emuleringskode. Dens utgang bekrefter klassisk JavaScript-syntaks og kjører på eldre nettlesere som Internet Explorer.

Babels første utgivelse tok verden med storm. Kort tid etter at det først dukket opp, omfavnet ulike rammer som reagerer, Vue og Ember det. Utviklere bruker ofte produktet uten å vite at det fungerer i bakgrunnen - mer enn ett populært NPM-prosjekt har en avhengighet på Babel.

• Hvordan lage en app

Disse avhengighetene forvandlet frigjøringsprosessen til forgjengeren til en konfliktfritt affære. Versjon 7, fortsatt administrert av et lite vedlikeholderlag, og prøvde dermed å være så kompatibelt som mulig. Bryterendringer er få og langt mellom, mens kodegenerasjonskvaliteten forblir høy (hvis du jobber med et lag, lagrer du dokumenter i skylagring vil hjelpe deg å holde sammenhengende).

Hvis du ikke har jobbet med Babel før, la dette være din guide. Å være i stand til å bruke avanserte JavaScript-funksjoner uten kompatibilitetsyrer gjør livet mye lettere.

Vil du ha noen verktøy for å effektivisere prosessen din? Vår guide til det beste Nettstedbygger vil hjelpe. Ønsker du langsiktig støtte? Få rett Web Hosting. service.

01. Versjonskontroll

Babel bor vanligvis i noden runtime miljø. La oss starte med å sjekke versjonene som brukes. Utgangen gir versjonen som finnes på Ubuntu 14.04 arbeidsstasjonen som brukes til å opprette følgende artikkel. Dette er ikke pedantry - figuren som følger med dette trinnet viser at Babel-teamet droppet støtten for ganske mange node.js-versjoner.

 Tamhan @ Tamhan-ThinkPad: ~ $ node --Version
V8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ NPM --Version
6.4.1 

02. Endring av pakkenavn

En bryteendring i versjon 7 har involvert å flytte Babel-pakkene i sitt eget navneområde. Eldre pakker ble ikke fjernet fra de ulike repositoriene. Dette er viktig, da bruken av eldre pakke navn fører til situasjonen vist i figuren som følger med dette trinnet.

 Tamhan @ Tamhan-ThinkPad: ~ / WorksPaceB7 $ NPM
Installer --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. Legg til en byggevirkning

Trinnet ovenfor antar at du jobber inne i et NPM-prosjekt. I så fall er det enkelt å kjøre Babel via bygningen. Åpen pakke.json. og modifiser den som demonstrert i koden nedenfor:

 {
. . .
"Main": "index.js",
"Skript": {
"Test": "ekko \" feil: ingen test
spesifisert \ "& amp; & amp; exit 1",
"Bygg": "Babel Index.js -D Lib"

}, 

04. TRANSPILE Kode for hånd

Putting babel på jobb innebærer å skyte av byggevirkningen. Dette er best oppnådd via NPM Run-kommandoen. De -D Verdien informerer Babel at resultatene må plasseres i Lib. Mappe - Figuren som følger med dette trinnet viser at mappen blir opprettet på flyet.

 Tamhan @ Tamhan-ThinkPad: ~ / WorksPaceB7 $ NPM
Kjør Bygg
& gt; [email protected] Bygg / Hjem / Tamhan /
WorkSpaceB7.
& gt; Babel index.js -d lib
Vellykket kompilert 1 fil med Babel. 

05. Et spørsmål om konfigurasjon

Påkalling av Babel uten ytterligere konfigurasjonsalternativer aktiverer ikke transpilasjon. Koden kan bare gjennomføres dersom rammen mottar ytterligere informasjon om målmiljøet. Dette kan gjøres via en kommandolinjeparameter, eller ved å opprette en fil som heter .babelrc. i prosjektrotten.

06. Konfigurer BabelRC

Babel konfigurerer seg selv via et sett med plugins, som hver av dem gjelder transpilasjonsforstyrrelser til kodebasen. Vi bruker den Forhåndsinnstilt miljø Pakke - Den leveres med et forhåndskonfigurert sett med transformasjoner som skal dekke de fleste baser.

 {
"Forhåndsinnstillinger": ["@ Babel / Preset-Env"]
} 

07. Tid for en prøvekjøring

Legg til en bit av New Age JavaScript til indeks.js for å teste programmet mot litt levende kode. Koden som følger med dette trinnet, vil ikke fungere på Legacy-nettlesere - Når den er ferdig, blir den implisitte funksjonen erstattet med en normal erklæring, som vist på figuren.

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

08. Juster målretting

Forhåndsinnstilt miljø Gjelder de fleste transpilasjoner som standard: Produktets mål er å skape universelt kompatibelt JavaScript uten hensyn til båndbredde og ytelseskostnader. Du kan endre konfigurasjonen ved å passere i en mål Objekt - Eksempelet nedenfor retter seg mot spesifikke versjoner av krom og dvs.

 {
"Forhåndsinnstillinger": [
[
"@ Babel / Preset-Env",
{
"Mål": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Avansert målretting

Babels nettlesermålretting er ikke begrenset til Chrome og Internet Explorer. Takket være samarbeid med Browserslist. , utviklere kan blande seg og matche fra mer enn et dusin mål, som vist nedenfor.

Navnene er tilfelle ufølsom:

• Android. for Android WebView.
• Baidu. for Baidu-nettleseren.
• Bjørnebær eller BB. for BlackBerry-nettleseren.
• Krom for Google Chrome.
• ChromeanDroid eller and_chr. for krom for Android.
• Kant for Microsoft Edge.
• Elektron for elektronramme. Det blir konvertert til krom-versjonen.
• Explorer eller dvs 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-nettleser for Android.
• Safari. for desktop safari.
• Samsung. for Samsung Internett.
• Ucandroid eller and_uc. for UC-nettleser for Android.

10. Avansert målretting, del to

BrowserList kan også ta avanserte spørsmål. Sin hjemmeside Lister konfigurasjonsalternativene, hvorav nesten alle som også kan brukes i Babel ved å modifisere BabelRc. . Spørsmål kan evalueres lokalt hvis arbeidsstasjonen har installert NPX.

 {
"Mål": "& gt; 0,25%, ikke død"
} 

11. Automatisk transpilasjon

Å måtte påberope Babel for hånden blir kjedelig raskt. Nodemonverktøyet overvåker filsystemets ressurser og brenner av kommandoer som endringer blir oppdaget. I teorien håndteres å legge til Nodemon-støtte via en liten forandring til pakke.json. .

 {
"Navn": "WorksPaceB7",
. . .
"Main": "index.js",
"Skript":
{
"Start": "Nodemon --Exec Babel-Node
index.js ", 

12. Sjekk for tilstedeværelse

Noen arbeidsstasjoner har nodemon. installert globalt. Hvis dette ikke er tilfelle, vil påkalle programmet gi en feilmelding som ligner den som er vist nedenfor. Heldigvis, distribusjon av det nodemon. er lett oppnådd via npm installasjon kommando.

 Tamhan @ Tamhan-ThinkPad: ~ / WorksPaceB7 $ NPM
Installer --Save-Dev Nodemon 

13. Kontroller funksjonaliteten

Fyre av NPM start i et terminalvindu og fortsett å endre innholdet i index.js. med en redaktør som Gedit eller Visuell studio kode . Etter lagring, nodemon. vil sende statusinformasjon.

 [Nodemon] omstart på grunn av endringer ...
[nodemon] starter `babel-node index.js`
[Nodemon] Rengjør avkjørsel - venter på endringer
før start på nytt 

14. Fest transpilasjon

Samtidig som nodemon. Deteksjonen skal fungere feilfritt på dette punktet, innholdet i index.js. fil som finnes i Lib. Ikke oppdater. Dette skyldes en nicety av Babel-node - Det forplikter ikke de transpilerte filene til disken. Det brenner i stedet en endret versjon av noden CLI, som fungerer med de gjennomførte filene.

15. TRANSPILE KODE PROGRAMMATISK

Babel er ikke begrenset til å jobbe på kommandolinjen. Hvis de riktige pakkene er installert, kan koden også transpileres fra et annet program. Utskningen som følger med dette trinnet, gjelder et sett med grunnleggende transformasjoner til en inngangsstreng. Husk at konfigurasjonsinnstillingene vanligvis er oppnådd fra a BabelRc. fil.

 VAR BABEL = KRAV ("@ Babel / Core");
importere {transform} fra "@ babel / core";
Importer * som Babel fra "@ Babel / Core";
babel.transform ("kode ();", alternativer,
funksjon (feil, resultat) {
resultat
resultat.Map;
resultat
}); 

16. TRANSPILE HELE FILER

Kildekoden blir vanligvis ikke lagret i strengvariabler. Babel API-kontoen står for dette via et sett med filrelaterte funksjoner, som forgo inngangsstrengen for en variabel med et filnavn. Resultatene blir imidlertid returnert som en vanlig Javascript-variabel.

 babel.transformfile ("filnavn.js", alternativer,
funksjon (feil, resultat) {
resultat; // = & gt; {kode, kart, AST}
}
); 

17. Synkronisering og async

Babel 7 introduserte synkron og asynkron versjoner av de fleste API-anrop. Sørg for å velge den rette for dine behov - mens de transporterte små eksempler kan gjøres på fluen, kan sette Babel løs på flere komplekse filer lett føre til forsinkelser som kjører i dusinvis av sekunder.

18. Lær om individuelle plugins

Skulle du noen gang finne deg selv lurer på hva som skjer i bakgrunnen, bare besøk denne siden . Det gir en liste over alle plugins som for tiden finnes i Babel-distribusjonen, og inneholder også noen få tips for alle som søker å skape et eget plugin.

19. Strip ut typekrypspesifikasjoner

Babel er ikke begrenset til å transponere New-Age JavaScript-elementene. Produktet inneholder en funksjonsbegrenset typeskriptmotor. Det striper ut å skrive informasjon og erstatte avanserte elementer. Dessverre utfører Babel ikke type-kontroll - dette eliminerer en av de viktigste fordelene med typeskriptet.

 {
"Forhåndsinnstillinger": ["@ Babel / Preset-Typecript"]
} 

20. Kjør Babel Online

Mens transponeringsoperasjonene vanligvis fungerer jevnt, oppstår problemer noen ganger. I så fall, Babel-replene er nyttig. Den kjører Babel i nettleseren på arbeidsstasjonen din og viser inngang og utgang rett ved siden av hverandre.

21. Lær om smertepunkter

Vår introduksjon forklarte at Babel ser utbredt bruk på tvers av ulike prosjekter. Babels vedlikeholderlag forenkler versjonen oppgraderinger med a Detaljert endringslogg . Hvis du bruker Babel programmatisk, ikke glem å konsultere API Upgrade Guide. .

Denne artikkelen ble opprinnelig publisert i utgave 283 av Creative Web Design Magazine Webdesigner . Kjøp problem 283 her eller Abonner på webdesigner her .

Relaterte artikler:

• Hvordan kode raskere, lettere javascript
• 5 Awesome JavaScript APIer
• 27 Top-Class Website Maler