opsætning af Babel til at kompilere es6+ Javascript-koder i en bagudkompatibel version af JavaScript I nuværende og ældre bro.sere eller miljøer er nok den nemmeste ting, jeg er stødt på som udvikler. Imidlertid, det tog mig tid at indse dette, og det skyldtes det faktum, at Babel ikke kun er en pakke, du tilslutter til dit projekt, og det begynder at spille, men du har faktisk brug for at få flere pakker sammen for at få det til at fungere, at kende de rigtige pakker at vælge kan være forvirrende. I dette blogindlæg forklarer jeg, hvordan du kan konfigurere Babel til at hjælpe dig med at kompilere dine ES6, es7, es8 osv.

som jeg sagde tidligere, at få Babel til at arbejde indebærer at få et par pakker fra npm, så lad os komme i gang. Den første pakke, vi ville installere, er babel-core. Dette er babel-motoren, men den kan ikke rigtig gøre noget af sig selv, den har brug for nogle andre pakker for at hjælpe den.

Kørnpm install @babel/core --savefor at installere babel-core

den anden pakke, vi ville installere, erbabel-cli. Denne pakke sikrer, at vi er i stand til at bruge Babel fra kommandolinjen, og da vi arbejder i et knudemiljø, skulle vi bestemt have brug for dette.

Kør npm install @babel/cli --save for at installere babel-cli

du vil måske medtage et babel-script i scriptafsnittet i din package.json sådan her:

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

dette ville hjælpe os med at undgå at skrive lange og forvirrende kommandoer i kommandolinjegrænsefladen hver eneste gang vi vil kompilere.

test

nu, med disse to pakker, kan vi faktisk gøre noget med babel, bare for at føle, hvad babel er, men ingen transformation ville forekomme endnu.

Opret en test.js fil og Skriv nogle JavaScript es6-koder i den, og gå derefter til kommandolinjen og kør

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

Du skal se en ny compiledTest.js fil, og denne fil vil indeholde lige det samme, som du har brug for skrev i test.js, så der opstod ingen kompilering, men Babel arbejder.

kommandoen, vi udførte ovenfor, fortæller simpelthen Babel at kompileretest.js filen til en outputfil med navnetcompiledTest.js. Hvis du har brug for at kompilere filer i en mappe, skal du bare gøre:

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

så for at få Babel til at udføre den faktiske kompilering, skal vi installere nogle plugins for at hjælpe babel-core. Sandheden er, at babel ikke gør noget selv, det bruger installerede plugins til at udføre sin magi. For at vi kan kompilere es6+ koder, skal vi installere env preset

Kør npm install @babel/preset-env --save for at installere env preset

vent, sagde jeg ikke, at Babel har brug for plugins, så hvad fanden er forudindstillet? Nå, en forudindstilling er bare en gruppe plugins, så jeg har ret, babel har brug for et plugin eller pluginS.
env forudindstilling er en gruppe plugins, der hjælper med at kompilere moderne/fremtidige versioner af JavaScript (ES2015, ES2016 osv.) i en aktuelt understøttet version af javascript.

efter installation af denne pakke skal vi fortælle Babel,

Hej fyr, jeg har lige installeret et sæt plugins, som jeg vil have dig til at bruge til min kompilering.

Vi ville gøre dette ved at oprette en.babelrc fil og den fil ville indeholde dette uddrag

{
"presets" : 
}

gå nu til kommandolinjen og prøv at kompilere vorestest.js fil igen.

HviscompiledTest.js filen indeholder es5-versionen aftest.js efter kompileringen er færdig, så er det det; vi har lige oprettet babel, men hvis det ikke gør det, så vil du måske kontrollere, om alt gik godt fra starten.

bare for bekræftelse skal din filstruktur være noget lignende som dette:

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

kompilering på farten

Nogle gange vil du ikke kompilere alle dine koder først, før du udfører dem; du vil bare have, at kompilering og udførelse skal ske på samme tid. For at opnå dette skal du bruge babel-node kommandoen. Denne kommando sendes ind med babel-clipakken, og det er ligesom en erstatning fornode kommandoen. Så i stedet for at gøre noget som dette node ./path/to/filefor at køre din fil, ville du gøre babel-node ./path/to/file for at kompilere og køre filen på samme tid.

Bemærk, babel-noden er som standard ikke i din kommandolinje, så du skal muligvis ændre scriptafsnittet i dinpackage.json for at inkludere

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

og kør din fil som denne:

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

konklusion

Jeg skrev / opdaterede dette blogindlæg med Babel-Core i version 7.2.0, hvis du finder ud af, at Babel har foretaget nogle brudændringer i opsætningsprocessen i nogle højere versioner, kan du fortælle mig det ([email protected]) så jeg vil opdatere dette blogindlæg, tak.