ställa in Babel för att kompilera es6+ Javascript-koder till en bakåtkompatibel version av JavaScript i nuvarande och äldre webbläsare eller miljöer är förmodligen det enklaste jag har stött på som utvecklare. Men det tog mig tid att inse detta och det berodde på att Babel inte bara är ett paket du ansluter till ditt projekt och det börjar spela men du måste faktiskt få flera paket tillsammans för att få det att fungera, att veta rätt paket att välja kan vara förvirrande. I det här blogginlägget skulle jag förklara hur du kan ställa in Babel för att hjälpa dig att sammanställa dina es6, es7, es8 etc Javascript-koder till versioner av Javascript som kan köras utan fel i NodeJS run-time.

som jag sa tidigare, att få Babel att arbeta innebär att få ett par paket från npm, så låt oss komma igång. Det första paketet vi skulle installera är babel-core. Det här är babel-motorn, men det kan inte göra någonting av sig själv, det behöver några andra paket för att hjälpa det.

kör npm install @babel/core --save för att installera babel-core

det andra paketet vi skulle installera är babel-cli. Detta paket säkerställer att vi kan använda Babel från kommandoraden och eftersom vi arbetar i en nodmiljö borde vi definitivt behöva detta.

kör npm install @babel/cli --save för att installera babel-cli

Du kanske vill inkludera ett Babel-skript i skriptavsnittet i ditt package.json så här:

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

detta skulle hjälpa oss att undvika att skriva långa och förvirrande kommandon i kommandoradsgränssnittet varje gång vi vill kompilera.

testning

nu, med dessa två paket, kan vi faktiskt göra något med babel, bara för att känna vad babel är, men ingen omvandling skulle inträffa ännu.

skapa en test.js fil och skriv några JavaScript es6-koder i den, gå sedan till kommandoraden och kör

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

Du bör se en ny compiledTest.js fil och den här filen skulle innehålla precis samma sak som du har skrev i test.js, så ingen sammanställning inträffade men Babel fungerar.

kommandot vi utförde ovan säger helt enkelt till Babel att kompilera test.js – filen till en utdatafil med namnet compiledTest.js. Om du behöver kompilera filer i en katalog gör du bara:

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

så för att få Babel att göra den faktiska sammanställningen måste vi installera några plugins för att hjälpa babel-core. Sanningen är att babel inte gör någonting själv, den använder installerade plugins för att utföra sin magi. För att vi ska kunna sammanställa es6+ – koder bör vi installera env preset

kör npm install @babel/preset-env --save för att installera env preset

vänta, sa jag inte att Babel behöver plugins, så vad i helvete är förinställt? Tja, en förinställning är bara en grupp plugins, så jag har rätt, babel behöver ett plugin eller pluginS.
env preset är en grupp plugins som hjälper till att kompilera moderna/framtida versioner av JavaScript (ES2015, ES2016, etc.) till en version som för närvarande stöds av javascript.

När du har installerat det paketet måste vi berätta för Babel,

Hej kille, jag installerade bara en uppsättning plugins som jag vill att du ska använda för min sammanställning.

Vi skulle göra detta genom att skapa en .babelrc fil och den filen skulle innehålla detta utdrag

{
"presets" : 
}

gå nu till kommandoraden och försök att sammanställa vår test.js fil igen.

om filencompiledTest.js innehåller es5-versionen avtest.js efter sammanställningen är klar så är det det; vi har just ställt in babel, men om det inte gör det kanske du vill kontrollera om allt gick bra från början.

bara för bekräftelse bör din filstruktur vara något liknande så här:

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

kompilering i farten

Ibland vill du inte kompilera alla dina koder först innan du kör dem; du vill bara att kompilering och exekvering ska ske samtidigt. För att uppnå detta bör du använda kommandot babel-node. Detta kommando skickas in med babel-clipaketet och det är precis som en ersättning förnode kommandot. Så istället för att göra något så härnode ./path/to/file för att köra filen skulle du görababel-node ./path/to/file för att kompilera och köra filen samtidigt.Observera att babel-noden inte finns i kommandoraden som standard, så du kanske behöver ändra skriptavsnittet i ditt package.jsonför att inkludera

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

och kör din fil så här:

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

slutsats

jag skrev/uppdaterade det här blogginlägget med Babel-core på version 7.2.0, om du upptäcker att Babel har gjort några Brytande förändringar i installationsprocessen i vissa högre versioner, kan du meddela mig ([email protected]) så att jag skulle uppdatera det här blogginlägget, tack.