Sette Opp Babel for å kompilere es6+ Javascript-koder i en bakoverkompatibel Versjon Av JavaScript i nåværende og eldre nettlesere eller miljøer er sannsynligvis det enkleste jeg har kommet over som utvikler. Det tok meg imidlertid tid å innse dette, og Det var på Grunn Av Det Faktum At Babel Ikke bare er en pakke du plugger inn i prosjektet ditt, og det begynner å spille, men du trenger faktisk å få flere pakker sammen for å få det til å fungere. I dette blogginnlegget vil jeg forklare hvordan Du kan sette Opp Babel for å hjelpe deg med å kompilere es6, es7, es8 Etc Javascript-koder i versjoner Av Javascript som kan kjøre uten feil i NodeJS run-time.

som jeg sa tidligere, å få Babel til å jobbe innebærer å få et par pakker fra npm, så la oss komme i gang. Den første pakken vi vil installere er babel-core. Dette er babel-motoren, men det kan egentlig ikke gjøre noe av seg selv, det trenger noen andre pakker for å hjelpe det.

Kjørnpm install @babel/core --save for å installere babel-core

den andre pakken vi vil installere erbabel-cli. Denne pakken sikrer at Vi kan bruke Babel fra kommandolinjen, og siden vi jobber i et nodemiljø, bør vi definitivt trenge dette.

Kjør npm install @babel/cli --save for å installere babel-cli

du vil kanskje inkludere et babel-skript i skriptdelen av package.json som dette:

"scripts": {
... "babel": "./node_modules/.bin/babel",
...}

dette vil hjelpe oss å unngå å skrive lange og forvirrende kommandoer i kommandolinjegrensesnittet hver eneste gang vi vil kompilere.

Testing

nå, med disse to pakkene, kan vi faktisk gjøre noe med babel, bare for å føle hva babel er, men ingen transformasjon ville skje ennå.

Opprett en test.js fil og skriv Noen JavaScript es6-koder i den, gå deretter til kommandolinjen og kjør

npm run babel test.js -- --out-file compiledTest.js

du bør se en ny compiledTest.js fil og denne filen vil inneholde akkurat det samme som deg.skrev i test.js, så ingen kompilering skjedde, men babel Jobber.

kommandoen vi utførte ovenfor, forteller Bare Babel å kompileretest.js filen til en utdatafil som heter compiledTest.js. Hvis du trenger å kompilere filer i en katalog bare gjøre:

npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination

Så, for Å få Babel til å gjøre selve kompilering, må vi installere noen plugins for å hjelpe babel-core. Sannheten er at babel ikke gjør noe selv, det bruker installerte plugins for å utføre sin magi. For at vi skal kunne kompilere es6+ koder, bør vi installere env preset

Kjør npm install @babel/preset-env --save for å installere env preset

vent, sa jeg ikke at babel trenger plugins, så hva i helvete er forhåndsinnstilt? Vel, en forhåndsinnstilling er bare en gruppe plugins, så jeg har rett, babel trenger en plugin eller pluginS.
denenv preset er en gruppe av plugins som bidrar til å kompilere moderne / fremtidige versjoner Av JavaScript (ES2015, ES2016, etc.) i en støttet versjon av javascript.

Etter å ha installert denne pakken, må Vi fortelle Babel,

Hei fyr, jeg har nettopp installert et sett med plugins som jeg vil at du skal bruke for min kompilering.

Vi ville gjøre dette ved å opprette en.babelrc fil og den filen ville inneholde denne koden

{
"presets" : 
}

gå nå til kommandolinjen og prøv å kompilere vårtest.js fil igjen.

HviscompiledTest.js filen inneholder es5-versjonen av test.js etter at kompileringen er ferdig, er det det; vi har nettopp satt opp babel, men hvis det ikke gjør det, vil du kanskje sjekke om alt gikk bra fra starten.

Bare for bekreftelse, bør filstrukturen din være noe lignende som dette:

|- node_modules
|- package.json
|- test.js
|- compiledTest.js
|- .babelrc

Kompilering på fly

noen ganger vil du ikke kompilere alle kodene dine først før du utfører dem; du vil bare at kompilering og utførelse skal skje samtidig. For å oppnå dette bør du bruke babel-node-kommandoen. Denne kommandoen leveres medbabel-cli pakken, og den er akkurat som en erstatning fornode kommandoen. Så i stedet for å gjøre noe som dette node ./path/to/file for å kjøre filen, ville du gjøre babel-node ./path/to/file for å kompilere og kjøre filen samtidig.

merk at babel-noden ikke er i kommandolinjen som standard, så du må kanskje endre skriptdelen avpackage.json for å inkludere

"scripts": {
..."babel-node": "./node_modules/.bin/babel-node",
...}

og kjøre filen slik:

npm run babel-node ./path/to/file

konklusjon

jeg skrev / oppdaterte dette blogginnlegget med babel-core på versjon 7.2.0. [email protected]) slik at jeg vil oppdatere dette blogginnlegget, takk.