Babelin perustaminen kokoamaan ES6+ Javascript-koodit taaksepäin yhteensopivaksi versioksi JavaScriptistä nykyisissä ja vanhemmissa selaimissa tai ympäristöissä lienee helpoin asia, johon olen rakennuttajana törmännyt. Kuitenkin, se vei minulta aikaa ymmärtää tämän ja se johtui siitä, että Babel ei ole vain paketti, joka liitetään projektiin ja se alkaa pelata, mutta sinun todella täytyy saada useita paketteja yhdessä saada se toimimaan, tietäen oikeat paketit valita voi olla hämmentävää. Tässä blogikirjoitus, olisin selittää, miten voit perustaa Babel auttaa sinua kääntämään es6, es7, es8 jne Javascript koodit versiot Javascript, joka voi suorittaa ilman virheitä NodeJS run-time.

kuten aiemmin sanoin, Babelin saaminen töihin edellyttää parin paketin hankkimista npm, joten aloitetaan. Ensimmäinen asentamamme paketti on babel-core. Tämä on Babelin moottori, mutta se ei voi tehdä mitään itse, se tarvitsee joitakin muita paketteja avukseen.

Suorita npm install @babel/core --save asentamaan babel-core

toinen asennettava paketti on babel-cli. Tämä paketti varmistaa, että voimme käyttää Babelia komentoriviltä ja koska työskentelemme solmuympäristössä, meidän pitäisi ehdottomasti tarvita tätä.

Suorita npm install @babel/cli --save asentaaksesi babel-clin

saatat haluta sisällyttää Babelin skriptin package.json näin:

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

tämä auttaisi meitä välttämään pitkien ja sekavien komentojen kirjoittamista komentorivin käyttöliittymään joka kerta, kun haluamme kääntää.

testaamalla

nyt näillä kahdella paketilla voimme oikeasti tehdä jotain Baabelin kanssa, vain tunteaksemme mitä Baabel on, mutta mitään muutosta ei vielä tapahtuisi.

Luo test.js tiedosto ja kirjoita siihen JavaScript es6-koodeja, siirry sitten komentoriville ja aja

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

sinun pitäisi nähdä uusi compiledTest.jstiedosto ja tämä tiedosto sisältäisi juuri saman asian kuin sinä kirjoittitest.js, niin ei koonnut, mutta Babel toimii.

yllä suoritettu komento käskee Babelia vain kokoamaan test.js – tiedoston tulostetiedostoon, jonka nimi on compiledTest.js. Jos haluat kääntää tiedostoja hakemistoon vain tehdä:

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

niin, saada Babel tekemään varsinaisen kääntämisen, meidän täytyy asentaa joitakin plugins avustamaan babel-core. Totuus on, että babel ei tee mitään itse, se käyttää asennettuja laajennuksia taikansa suorittamiseen. Jotta voisimme koota es6+ – koodeja, meidän tulisi asentaa env valmiiksi

ajaa npm install @babel/preset-env --save asentamaan env valmiiksi

odota, enkö sanonut, että Babel tarvitsee lisäosia, joten mikä helvetti on valmiiksi? No, esiasetus on vain ryhmä plugins, joten olen oikeassa, babel tarvitsee plugin tai pluginS.
env preset on joukko liitännäisiä, jotka auttavat kääntämään JavaScriptin moderneja/tulevia versioita (ES2015, ES2016 jne.) tällä hetkellä tuettuun javascript-versioon.

tuon paketin asentamisen jälkeen täytyy kertoa Babelille,

Hey guy, asensin juuri joukon plugineita, joita haluan sinun käyttävän kääntämiseen.

tekisimme tämän luomalla .babelrc tiedoston ja se tiedosto sisältäisi tämän pätkän

{
"presets" : 
}

mene nyt komentoriville ja yritä koota test.js tiedosto uudelleen.

Jos compiledTest.js tiedosto sisältää test.js ES5-version, kun kooste on tehty, niin se on siinä; olemme juuri perustaneet Babelin, mutta jos ei, niin kannattaa tarkistaa, menikö kaikki hyvin alusta asti.

vain vahvistukseksi tiedostorakenteesi pitäisi olla jotain tämänkaltaista:

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

koostaminen lennossa

joskus et halua koota kaikkia koodejasi ensin ennen niiden toteuttamista, vaan haluat vain koostamisen ja suorittamisen tapahtuvan samaan aikaan. Tämän saavuttamiseksi sinun tulee käyttää Baabel-solmu-komentoa. Tämä komento kulkee mukana babel-cli – paketilla ja se on kuin korvaaja node – komennolle. Joten sen sijaan, että tekisit jotain tällaista node ./path/to/file suorittaaksesi tiedostosi, tekisit babel-node ./path/to/file kääntääksesi ja suorittaaksesi tiedoston samanaikaisesti.

huomaa, että babel-solmu ei ole oletusarvoisesti komentorivilläsi, joten saatat joutua muokkaamaan package.json sisältääksesi

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

ja suorittamaan tiedostosi näin:

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

johtopäätös

kirjoitin/päivitin tämän blogikirjoituksen Babel-Core versiolla 7.2.0, jos saat selville, että Babel on tehnyt joitain murtavia muutoksia perustamisprosessissa joissakin korkeammissa versioissa, voit kertoa minulle ([email protected]) jotta voisin päivittää tämän blogikirjoituksen, kiitos.