a Beginner ’ s Guide to Babel

tässä artikkelissa esitellään Babel, JavaScript-Kääntäjä, jonka avulla kehittäjät voivat käyttää seuraavan sukupolven JavaScriptiä nykyään.

JavaScriptin kirjoittaminen verkkosovelluksia rakennettaessa voi olla turhauttavaa. Meidän täytyy miettiä ominaisuuksia saatavilla selaimissa olemme kohdistettu ja mitä tapahtuu, kun ominaisuus ei ole toteutettu. Jotkut ihmiset suosittelevat yksinkertaisesti olla käyttämättä sitä, mikä on tuskallinen kokemus suurimman osan ajasta, jos rakennamme jotain monimutkaista.

onneksi joidenkin työkalujen avulla voimme lakata murehtimasta tuettuja asioita ja vain kirjoittaa parhaan mahdollisen koodin. Niitä kutsutaan transpilereiksi. Transpileri on työkalu, joka ottaa lähdekoodia syötteenä ja tuottaa uutta lähdekoodia ulostulona, jonka syntaksi on erilainen mutta semanttisesti mahdollisimman lähellä — tai ihanteellisesti vastaava — alkuperäistä.

Babel on aika lailla standardi transpileri, jolla voidaan kääntää moderni JavaScript (ES2015+) yhteensopiviksi toteutuksiksi, jotka toimivat vanhoissa selaimissa. Se on täydellinen ratkaisu, jos haluat vain keskittyä kirjallisesti JavaScript.

ja vaikka Baabelin päätavoite on ECMAScript (ES): n uusimpien standardien kääntäminen vanhoille — tai joskus nykyisille — selaimille, se voi tehdä enemmänkin. On ekosysteemi esiasetukset ja plugins, jotka mahdollistavat lisäämällä ei-standardi ominaisuuksia samoin. Jokainen plugin tekee uuden ominaisuuden / transformation saatavilla koodin, ja esiasetukset ovat vain kokoelma plugins.

alku

Babelin perustamiseen on erilaisia tapoja riippuen projektista ja käytettävistä työkaluista. Tässä artikkelissa, aiomme selittää, miten perustaa Babel käyttäen CLI, vaikka jos käytät rakentaa järjestelmä tai puitteet, Voit tarkistaa erityisiä ohjeita virallisella sivustolla. Suurimman osan ajasta CLI on nopein ja helpoin tapa päästä alkuun, joten jos olet ensikertalainen, voit vapaasti jatkaa.

ensimmäinen vaihe Babelin perustamiseksi projektiin on asentaa paketti käyttäen npm: ää ja lisätä se dev-riippuvuutena. Olettaen, että sinulla on toimiva solmu.JS ympäristö jo käytössä, se on vain kysymys käynnissä seuraavat terminaalissa:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

tämä luo hakemistoon (babel-test) muutoksen, alustaa npm-projektin (luo näin package.json – tiedoston) ja asentaa sitten babel-cli: n dev-riippuvuutena.

jos tarvitset apua edellä mainittujen kanssa, ota yhteyttä tutoriaaleihimme solmun asentamisessa ja NPM: n kanssa toimimisessa.

seuraavaksi voimme avata package.json ja lisätä build – komennon npm-skripteihimme:

"scripts": { "build": "babel src -d dist"}

tämä vie lähdetiedostot src – hakemistosta ja tulostaa tuloksen dist – hakemistoon. Sitten voimme suorittaa sen:

npm run build

mutta odota! Ennen käynnissä Babel meidän täytyy asentaa ja perustaa plugins, joka muuttaa koodia. Helpoin ja nopein tapa tehdä tämä on lisätä env-esiasetus, joka valitsee sopivat liitännäiset osoittamiesi kohdeselainten mukaan. Se voidaan asentaa käyttämällä:

npm install babel-preset-env --save-dev

luo sitten .babelrc – tiedosto projektin juureen ja lisää esiasetus:

{ "presets": }

.babelrc – tiedosto on paikka, johon laitat kaikki Baabelin asetukset. Voit käyttää tätä ensisijaisesti perustaa esiasetukset ja plugins, mutta paljon enemmän vaihtoehtoja on saatavilla. Voit tarkistaa koko listan Babelin API-sivulta.

huomaa, että käyttöjärjestelmästäsi riippuen pisteellä alkavat tiedostot piilotetaan oletusarvoisesti. Jos tämä on sinulle ongelmallista (tai jos haluat vain vähemmän tiedostoja), voit laittaa Babelin asetukset package.json – tiedostoon babel – näppäimen alle, kuten näin:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

lopuksi, Let ’ s luoda hakemistoja ja tiedostoja Babel odottaa löytää:

mkdir src dist

ja antaa sille jotain muutettavaa:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

tässä esimerkissä käytetään destructuring-määritystä kahden muuttujan arvojen vaihtamiseen.

käynnissä Baabel

nyt kun sinulla on käyttövalmis Baabel-asennus, voit suorittaa build – komennon kokoamisprosessin ajamiseksi:

npm run build

tämä ottaa koodin src/main.js, muuttaa sen ES5-koodiksi ja tulostaa muunnetun koodin dist/main.js.

näin se tuotti:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

kuten näette, let on korvattu numerolla var ja Babel on ottanut käyttöön väliaikaisen muuttujan (jota merkitään alaviitteellä) helpottamaan vaihtamista.

ja se siitä. src – hakemistoon kirjoittamasi koodi käännetään kielen aiemmille versioille. Oletuksena, jos et lisää mitään vaihtoehtoja esiasetukseen, se lataa kaikki muunnokset. Voit myös ilmoittaa kohdeselaimet seuraavasti:

{ "presets": } }] ]}

tämä lataa tarvittavat muunnokset tukemaan kunkin selaimen kahta viimeisintä versiota ja Safaria, joka on suurempi tai yhtä suuri kuin versio 7. Löydät käytettävissä olevat vaihtoehdot kohdeselaimille Browserlist repository.

Baabelin Ekosysteemi: Nopea yleiskatsaus

kuten huomasit edellisessä osiossa, Babel ei tee mitään itsestään, kun asennat sen. Meidän täytyy asentaa joukko plugins saada haluttu käyttäytyminen, tai voimme käyttää esiasetuksia, jotka ovat ennalta joukko plugins.

yleensä jokainen ominaisuus, jonka haluat sisällyttää, on liitännäisen muodossa. Joitakin esimerkkejä ES2015: stä ovat:

• vakiot
• nuolifunktiot
• lohkofunktiot
• luokat
• for-of
• spread
• template literals

KS.plugins sivu Babel docs täydellinen luettelo.

mutta joskus et halua sisällyttää kaikki plugins yksitellen. Joten on olemassa valmiiksi esiasetukset, jotka helpottavat asennusprosessin kunkin plugin.

tällä hetkellä saatavilla olevat kolme virallista esiasetusta ovat:

• Env
• React
• Flow

Env on useimmin käytetty ja tässä käytetty. Se lataa automaattisesti kaikki tarvittavat muutokset tehdä koodin yhteensopiva riippuen kohdennettuja selaimia.

React-esiasetus muuttaa tyypillisesti React-projekteissa esiintyvää koodia, lähinnä lisäämällä yhteensopivuutta Virtahuomautusten ja JSX: n kanssa.

ja lopuksi virtauksen esiasetusta käytetään koodin puhdistamiseen Virtaustyypin merkinnöistä (vaikka se ei tarkista, ovatko tyypit voimassa vai eivät.)

Babel Polyfill

on JavaScript — ominaisuuksia, joita ei voi muuttaa syntaktisesti, yleensä koska vastaavia toimintoja ei ole toteutettu-esimerkiksi lupauksia ja generaattoritoimintoja.

sellaiset ominaisuudet on toteutettava selaimessa kirjastolla, jota käytetään koodissa, ja se on polyfillin työtä.

Babelin polyfillin muodostavat core-js ja regeneraattorin runtime. Yhdessä ne kattavat kaikki es2015+: n ominaisuudet.

Advanced Use

kuten mainittu, Baabelia voidaan käyttää myös sellaisten ominaisuuksien muuttamiseen, joita ei ole vielä toteutettu kielellä. Hyvä esimerkki tästä on class fields ehdotus (tällä hetkellä tc39 vaiheessa 3: ehdokas). Tämä on erityisen suosittua React devs: n keskuudessa, koska se poistaa tarpeen sitoa menetelmiä eksplisiittisesti tiettyyn komponenttiin ja tarkoittaa myös sitä, että komponentin state voidaan julistaa luokkakentäksi (mahdollisesti poistaa konstruktorin tarpeen).

niille, jotka haluavat käyttää luokkakenttiä tänään, on lisättävä babel-plugin-transform-class-properties dev-riippuvuutena:

npm install --save-dev babel-plugin-transform-class-properties

päivität .babelrc – tiedostosi myös seuraavasti:

{ "presets": , "plugins": }

nyt voit kirjoittaa:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

eikä se lopu siihen. Voit myös käyttää Babel lisätä uusia ominaisuuksia oman kielen, kuten opetusohjelma ymmärrystä ASTs rakentamalla oman Babel Plugin osoittaa.

vaihtoehdot

nykyaikaisten verkkosovellusten kirjoittaminen vaatii joskus enemmän kuin Javascriptissä olevat ominaisuudet. Myös muita kieliä voi kääntää yhteensopivalle JavaScriptille, mutta toteuttaa myös muita hyödyllisiä ominaisuuksia.

suosituin vaihtoehto on TypeScript, joka on säännöllinen JavaScript, joka toteuttaa modernit ES-ominaisuudet, mutta lisää myös muita, erityisesti tyyppiturvallisuuteen liittyen.

toisessa ääripäässä on täysin erilaisia kieliä eri kategorioissa, funktionaalisista kuten Purescriptistä oliopainotteiseen kuten Dartiin.

jos haluat syvemmän yleiskuvan vaihtoehtoisista kielistä, Katso 10 kieltä, jotka kääntävät JavaScriptille.

Conclusion

Babel on loistava vaihtoehto modernien sovellusten kirjoittamiseen tarjoten samalla JavaScriptiä, jota kaikki kehittäjät voivat ymmärtää ja jolla koodin täytyy kulkea.

Babelista ei ole hyötyä ainoastaan es2015+: n muuntamisessa kielen aiempiin versioihin — sekä selaimessa että Node-alustoilla.js – mutta myös uusien ominaisuuksien lisäämiseen, jotka eivät kuulu standardiin. Nähdä, mitä tarkoitan, vain katsomaan npm hakemistoon löytää kaikki käytettävissä Babel plugins tai esiasetukset.

koska JavaScript kehittyy niin kovaa vauhtia, on selvää, että selainvalmistajat tarvitsevat tovin uusimpien ominaisuuksien toteuttamiseen. Antaa Babel paikka työkalupakki tarkoittaa, että voit kirjoittaa huippuluokan JavaScript tänään, turvallinen tietäen, että et hylkää mitään käyttäjiä. Mikä ei ole rakastettavaa?