Babel Instellen om es6+ Javascript-codes te compileren in een achterwaarts compatibele versie van JavaScript in huidige en oudere browsers of omgevingen is waarschijnlijk de het makkelijkste wat ik ben tegengekomen als ontwikkelaar. Het kostte me echter tijd om dit te realiseren en dat was te wijten aan het feit dat Babel niet alleen een pakket is dat je in je project plug en het begint te spelen, maar dat je eigenlijk meerdere pakketten bij elkaar moet krijgen om het te laten werken, wetende dat de juiste pakketten om te kiezen verwarrend kunnen zijn. In deze blogpost zou ik uitleggen hoe je Babel kunt instellen om je te helpen je ES6, es7, es8 etc Javascript codes te compileren in versies van Javascript die zonder fouten kunnen draaien in NodeJS run-time.

zoals ik al eerder zei, Om Babel aan het werk te krijgen, moet je een paar pakketten ophalen van npm, dus laten we beginnen. Het eerste pakket dat we zouden installeren is babel-core. Dit is de babel engine, maar het kan niet echt iets doen op zichzelf, het heeft een aantal andere pakketten nodig om het te helpen.

voer npm install @babel/core --save uit om babel-core

het tweede pakket dat we zouden installeren is de babel-cli. Dit pakket zorgt ervoor dat we Babel vanaf de commandoregel kunnen gebruiken en aangezien we in een node omgeving werken moeten we dit zeker nodig hebben.

voer npm install @babel/cli --save om babel-cli

u wilt misschien een Babel script opnemen in de script sectie van uw package.json als volgt:

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

Dit zou ons helpen te voorkomen dat lange en verwarrende commando ‘ s in de command line interface elke keer dat we willen compileren.

testen

nu, met deze twee pakketten, kunnen we eigenlijk iets doen met babel, gewoon om te voelen wat babel is, echter, er zou nog geen transformatie plaatsvinden.

Create a test.js file and write some JavaScript es6 codes in it, then go to the command line and run

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

u zou een nieuw compiledTest.js file moeten zien en dit bestand zou precies hetzelfde bevatten als dat u schreef in de test.js, dus er is geen compilatie opgetreden, maar Babel werkt.

het commando dat we hierboven uitvoerden vertelt Babel eenvoudig om het test.js bestand te compileren naar een uitvoerbestand met de naam compiledTest.js. Als je bestanden in een map moet compileren, doe dan:

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

dus, om Babel zover te krijgen dat hij het eigenlijke compileren doet, moeten we enkele plugins installeren om de babel-core te helpen. De waarheid is dat babel zelf niets doet, het gebruikt geïnstalleerde plugins om zijn magie uit te voeren. Om es6+ – codes te kunnen compileren, moeten we env preset

Run npm install @babel/preset-env --save om de env preset

wacht, zei ik niet dat Babel plugins nodig heeft, dus wat is preset? Goed, een voorinstelling is slechts een groep van plugins, dus ik heb gelijk, babel heeft een plugin of pluginS nodig.
De env preset is een groep plugins die helpen bij het compileren van moderne / toekomstige versies van JavaScript (ES2015, ES2016, etc.) in een momenteel ondersteunde versie van javascript.

na het installeren van dat pakket, moeten we Babel vertellen,

Hey guy, Ik heb net een set plugins geïnstalleerd die Ik wil dat je gebruikt voor mijn compileren.

we zouden dit doen door een .babelrc bestand aan te maken en dat bestand zou dit fragment bevatten

{
"presets" : 
}

ga nu naar de opdrachtregel en probeer ons test.js bestand opnieuw te compileren.

als hetcompiledTest.js bestand de es5 versie van detest.js bevat nadat de compilatie is gedaan, dan is dat het; we hebben babel net ingesteld, maar als dit niet het geval is, dan wilt u misschien controleren of alles vanaf het begin goed is gegaan.

ter bevestiging zou uw bestandsstructuur ongeveer als volgt moeten zijn:

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

on the fly compileren

soms wilt u niet al uw codes eerst compileren voordat u ze uitvoert; u wilt alleen dat het compileren en uitvoeren tegelijkertijd gebeurt. Om dit te bereiken moet je het babel-node commando gebruiken. Dit commando wordt geleverd met hetbabel-cli pakket en het is net als een vervanging voor hetnode Commando. Dus in plaats van iets als dit te doen node ./path/to/file om uw bestand uit te voeren, zou u babel-node ./path/to/file doen om het bestand tegelijkertijd te compileren en uit te voeren.

Let op, de babel-node is niet in de opdracht regel standaard, dus je kan nodig hebben om het wijzigen van het script sectie van uw package.json opnemen

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

En voer uw bestand als volgt aan:

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

Conclusie

ik schreef/update van deze blog post met babel-core op versie 7.2.0, als je erachter dat babel heeft een aantal breken van wijzigingen in het opzetten van proces op een hogere versies, kunt u mij laten weten ([email protected]) dus dat zou ik update deze blog post, dank je.