Configurarea Babel pentru a compila es6+ coduri Javascript într-o versiune compatibilă înapoi de JavaScript în browsere curente și mai vechi sau medii este probabil cel mai simplu lucru pe care l-am întâlnit ca dezvoltator. Cu toate acestea, mi-a luat timp să realizez acest lucru și asta s-a datorat faptului că Babel nu este doar un pachet pe care îl conectați la proiectul dvs. și începe să joace, dar de fapt trebuie să reuniți mai multe pachete pentru a-l face să funcționeze, știind pachetele potrivite pentru a alege Poate fi confuz. În această postare pe blog, aș explica cum puteți configura Babel pentru a vă ajuta să compilați codurile Javascript ES6, es7, es8 etc În versiuni de Javascript care pot rula fără erori în timpul rulării NodeJS.

cum am spus mai devreme, obtinerea Babel la locul de muncă implică obținerea unui cuplu de pachete de lanpm, deci să începem. Primul pachet pe care l-am instala este babel-core. Acesta este motorul babel, dar nu poate face nimic de la sine, are nevoie de alte pachete pentru a-l ajuta.

Runnpm install @babel/core --save pentru a instala babel-core

al doilea pachet ne-ar fi instalarea estebabel-cli. Acest pachet ne asigură că putem folosi Babel din linia de comandă și, deoarece lucrăm într-un mediu nod, ar trebui să avem nevoie cu siguranță de acest lucru.

Run npm install @babel/cli --save pentru a instala babel-cli

poate doriți să includeți un script babel în secțiunea script din package.json astfel:

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

acest lucru ne-ar ajuta să evităm tastarea comenzilor lungi și confuze în interfața liniei de comandă de fiecare dată când dorim să compilăm.

testarea

acum, cu aceste două pachete, putem face de fapt ceva cu babel, doar pentru a simți ce este babel, cu toate acestea, nici o transformare nu ar avea loc încă.

creați un fișier test.js și scrieți câteva coduri JavaScript es6 în el, apoi mergeți la linia de comandă și rulați

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

ar trebui să vedeți un nou fișier compiledTest.js și acest fișier ar conține exact același lucru pe care a scris în test.js, deci nu a avut loc compilarea, dar Babel funcționează.

comanda pe care am executat-o mai sus îi spune lui Babel să compileze fișierultest.js într-un fișier de ieșire numitcompiledTest.js. Dacă aveți nevoie pentru a compila fișiere într-un director doar face:

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

deci, pentru a obține Babel pentru a face compilarea reală, avem nevoie pentru a instala unele plugin-uri pentru a ajuta babel-core. Adevărul este că babel nu face nimic în sine, folosește pluginuri instalate pentru a-și îndeplini magia. Pentru a putea compila codurile es6+, ar trebui să instalăm env presetare

Run npm install @babel/preset-env --save pentru a instala env presetare

stai, nu am spus că Babel are nevoie de pluginuri, deci ce naiba este presetat? Ei bine, o presetare este doar un grup de pluginuri, așa că am dreptate, babel are nevoie de un plugin sau pluginuri.
env presetarea este un grup de pluginuri care ajută la compilarea versiunilor moderne/viitoare ale JavaScript (ES2015, ES2016 etc.) într-o versiune acceptată în prezent de javascript.

după instalarea acelui pachet, trebuie să-i spunem lui Babel,

Hei guy, tocmai am instalat un set de pluginuri pe care vreau să le folosești pentru compilarea mea.

am face acest lucru creând un fișier.babelrc și acel fișier ar conține acest fragment

{
"presets" : 
}

acum mergeți la linia de comandă și încercați să compilațitest.js fișier din nou.

dacăcompiledTest.js fișierul conține versiunea es5 atest.js după compilare se face atunci asta este; tocmai am configurat babel, dar dacă nu, atunci poate doriți să verificați dacă totul a mers bine de la început.

doar pentru confirmare, structura fișierului dvs. ar trebui să fie ceva similar ca acesta:

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

compilarea din mers

uneori, nu doriți să compilați mai întâi toate codurile înainte de a le executa; doriți doar compilarea și executarea să se întâmple în același timp. Pentru a realiza acest lucru, ar trebui să utilizați comanda babel-node. Această comandă se livrează cubabel-cli pachet și este la fel ca un înlocuitor pentrunode comandă. Deci, în loc să faceți ceva de genul acesta node ./path/to/file pentru a rula fișierul dvs., ați face babel-node ./path/to/file pentru a compila și rula fișierul în același timp.

notă, babel-node nu este în linia de comandă în mod implicit, astfel încât este posibil să fie nevoie să modificați secțiunea script-ul depackage.json pentru a include

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

și rulați fișierul astfel:

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

concluzie

am scris / actualizat această postare pe blog cu Babel-core la versiunea 7.2.0, dacă aflați că Babel a făcut unele modificări de rupere în procesul de configurare în unele versiuni superioare, puteți să-mi spuneți ([email protected]) ca să actualizez această postare pe blog, mulțumesc.