Katso Babel 7- ja Webpack 4 -videokurssimme:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Vie JavaScript-taitosi uudelle tasolle:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel on työkaluketju, jota käytetään pääasiassa ECMAScript 2015+ -koodin muuntamiseen taaksepäin yhteensopivaksi JavaScript-versioksi nykyisissä ja vanhemmissa selaimissa tai ympäristöissä. ECMAScript 2015+ vastaa ES6+:aa.
Babelia voi ajatella kääntäjänä. ES6+ JS tarjoaa meille monia uusia ominaisuuksia ja syntaksia. Ne voivat parantaa kehitystyömme tehokkuutta valtavasti. Mutta tällä hetkellä suurin osa näistä uusista ominaisuuksista on tunnistamattomia selaimissa. Yhteensopivuuden sekä kehityksen helppouden ja tehokkuuden välisen tasapainon löytämiseksi kehitettiin Babel.
Me ohjelmoijat kirjoitamme koodeja ES6+:lla ja pyydämme sitten Babelia kääntämään ne koodeiksi, joita selaimet ymmärtävät.
Babel itse voi hoitaa vain uusien syntaksien kääntämisen. ES6+ on myös lisännyt monia uusia API:ita, kuten Promise, Map, Object.assign() jne. Uusi API tarkoittaa uusia objekteja, ominaisuuksia ja metodeja. API on vain hieno nimi. Älä pelästy sitä. Jotta voimme käsitellä niitä, meidän on lisättävä nämä API:t ES5:een. Tämän työn tekee Babelin avustaja. Näytämme myöhemmin, kuka tämä avustaja on.
Muista siis tämä johtopäätös: Babel kääntää uudet syntaksit ja sen avustaja hoitaa uudet API:t.
Mene ensiksi Babelin viralliselle verkkosivulle ja napsauta Asiakirjat-nappia.
Babel hoitaa syntaksin kääntämisen. Polyfill käsittelee puuttuvat ominaisuudet. Vastaus siis aiemmin jättämäämme kysymykseen: Babelin avustaja on polyfill.
Babel osaa ES6+:n kääntämisen lisäksi käsitellä myös JSX:ää ja TypeScriptiä. Joten tässä tulee toinen käsite: preset. Preset on käännös, jota Babel käyttää. Se ohjaa sitä, miten Babel tekee käännöksen.
Olet siis nyt oppinut kaksi tärkeää Babelin käsitettä: preset ja polyfill.
Seuraavaksi asennetaan Babel.
Babelin asennus ja konfigurointi:
Tämä on Babelin virallisen käsikirjan ehdottama asennuskomento. Jos katsot tarkkaan, huomaat, että itse asiassa asennetaan neljä pakettia, kolme kehitysriippuvuutena ja yksi tuotantoriippuvuutena.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, on nimensä mukaisesti koko Babel-ohjelman ydin.
Babel/cli on komentorivikäyttöliittymä. Sen avulla kommunikoimme babelin kanssa.
Babel itse ei osaa kääntää ES6-koodeja. Se tarvitsee liitännäisiä kertomaan sille miten. Liitännäisiä on monia. Niiden asentaminen ja asettaminen yksi kerrallaan on työlästä hommaa. Siksi paras ratkaisu on käyttää babelin esiasetusta. Preset on kokoelma lisäosia. Käyttämämme preset on preset-env.
Babel/preset-env on standardi, jota Babel 7 käyttää kääntäessään ES6+:n ES5:ksi. Babel 7:ssä preset-env on korvannut preset-2015/6/7 jne.
Babel/polyfill on tarkoitettu ES6+ ominaisuuksien lisäämiseen ES5:een. Miksi meidän on siis tehtävä se?
Uusi syntaksi ei ole ainoa ero ES6:n ja ES5:n välillä. ES6 on jo saanut monia uusia API:ita. API on vain hieno nimi sisäänrakennetuille objekteille. Nämä uudet sisäänrakennetut objektit ovat erittäin hyödyllisiä, mutta ongelmana on, että niitä ei ole ES5-ympäristössä.
Ainut ratkaisu on lisätä nämä sisäänrakennetut objektit ES5-ympäristöön. Tätä varten on polyfill.
Kytketään oma terminaalimme päälle ja perustetaan projekti.
Kytketään ensin terminaali päälle ja luodaan projektin juurihakemisto. Sitten CD siihen ja npm init.
Seuraavaksi kopioimme Babelin virallisesta ohjekirjasta löytyviä neljää asennuskomentoa ja liimaamme ne terminaaliin.
Kun asennus on valmis, sinun pitäisi nähdä näiden neljän paketin asentuvan:
Avataan projektimme VSC:ssä ja tarkistetaan paketti.json.
Cli, core ja preset-env ovat kehitysriippuvuuksia. polyfill on tuotantoriippuvuus.
Voit ajatella polyfilliä lähdekoodina. Siihen tallennetaan kaikkien es6:n uusien ominaisuuksien lähteet.
ES5 + polyfill = ES6.
Ennen kuin pystymme käyttämään Babelia, meidän on konfiguroitava se. Paras tapa tehdä se on luoda tiedosto, johon tallennetaan Babelin konfigurointitiedot.
Babel 6:ssa tallennamme konfigurointitiedot tiedostoon .babelrc tai package.json.
Babel 7 tarjoaa meille uuden ratkaisun: babel.config.js.
Babelin käsikirja on tarjonnut meille mallin, jonka avulla voimme luoda babel.config.js. Meidän tarvitsee vain kopioida se projektimme juurikansioon.
Ensin moduulimme vie objektin.
Sitten määrittelemme siihen presets-ominaisuuden. Presetsin arvo on array.
Array:n sisälle laitetaan toinen array.
lapsijoukon ensimmäinen elementti on esiasetus, jota haluamme käyttää. Tässä asetamme sen arvoksi @babel/env tai @babel/preset-env.
Kakkoselementti on config-olio. Sen sisällä on kaksi ominaisuutta: targets ja useBuiltIns. Targets on selainten konfigurointia varten ja useBuiltIns polyfillejä varten.
Nyt olemme asentaneet ja konfiguroineet Babelin.
Testataan seuraavaksi.
Projektin juurihakemistoon luodaan uusi tiedosto: es6.js.
Sitten kytketään päälle päätelaite (terminaali) ja syötetään babel-komento: npx babel es6.js. Tämän saamme:
ES6-let on muunnettu ES5-variksi.
NPX babel on sama kuin node_modules/.bin/babel
Nyt olemme onnistuneesti ”babeloineet” ensimmäisen ES6-tiedostomme.
Voi olla, että haluat tulostaa käännetyn tiedoston itsenäisenä tiedostona. Tässä tapauksessa tarvitset -o tai – output-dir.
-o ja – output-file voivat kääntää vain yhden tiedoston kerrallaan. Todellisessa kehitystyössäsi saatat haluta tallentaa ES6-tiedostot yhteen hakemistoon ja kääntää jokaisen kyseisen hakemiston tiedoston.
Esimerkiksi projektin juurihakemistoon luodaan kaksi alihakemistoa: ES6 ja ES5. Kirjoitamme ES6-tiedostot dir ES6:een. Sitten ”babeloimme” ne dir ES5:een. HTML-tiedostot linkittävät JS-tiedostot dir es5:stä.
Tässä tapauksessa tarvitsemamme komento on npx babel ES6 -d ES5 tai npx babel ES6 – out-dir ES5.
Nyt kaikki dir ES6:ssa olevat tiedostot ”babeloidaan” dir ES5:een.
Seuraavaksi näytetään, mitä polyfill voi tehdä puolestamme.
Tämä on tiedosto, jonka haluamme babeloida:
Tiedosto käyttää paljon ES6:n API-rajapintoja, joita ei ole ES5:ssä. Ainoa tapa saada ne toimimaan ES5-ympäristössä on lisätä näiden uusien API:iden lähdekoodit ES5-ympäristöön. Tätä varten polyfill on olemassa, ja siksi polyfill on myös asennettu tuotantoriippuvuutena. Tarvitsemme sitä tuotannossa.
Tässä on vähemmän tarkka analogia, joka auttaa ymmärtämään, miksi tarvitsemme polyfilliä.
Asettakaamme jQuery-ohjelma. Emme voi ajaa jQuery-ohjelmaamme suoraan. Meidän on ensin linkitettävä jQueryn lähdekoodi. Polyfill on jQueryn lähdekoodi, jonka linkitämme sisään.
Tämä on ”babeloitu” ES5-tiedosto, jonka saimme:
Näetkö nuo kaikki vaaditut tiedostot? Ne ladataan polyfillin avulla. Mutta ”babeled”-tiedostoa ei voi käyttää suoraan HTML-tiedostoissa. Meidän on niputettava ne webpackin avulla. Mutta kaikki tarvittavat ”API-lähdekoodit” on ladattu.
Tätä asetusta ohjataan useBuiltIns proeprtyllä babel.config.js:ssä. Tällä ominaisuudella on kolme arvoa: usage, false ja entry.
Usage on paras ja yleisimmin käytetty arvo. Se on myös se, mitä suosittelemme.
Käytön lisäksi useBuiltInsilla on kaksi muuta arvoa: false ja entry.
False sammuttaa polyfillin. Tämä tarkoittaa, että sinun on linkitettävä tarvittavat API:t manuaalisesti. Sitä et todellakaan halua tehdä.
Jos käytät entryä, sinun on ”vaadittava” @babel/polyfillEntry tiedostosi alussa. Silloin babel tarkistaa ensin targets-ominaisuuden selvittääkseen, mitkä ovat kohdeselaimet. Se lataa kaikki API:t, joita kohdeselain ei tue. Ilmeisesti saamme tällä tavalla paljon tarpeettomia API:ita.
Yhteenvetona voidaan siis todeta, että aseta useBuiltIns arvoksi usage ja Babel hoitaa loput puolestasi.
Lue TÄYDELLINEN Babel 7 ja Webpack 4 -kurssimme Udemyssä:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Lue TÄYDELLINEN web-kehityskurssimme Udemyssä:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD