Articles /

Aloita Babel 7

JavaScript on ainutlaatuinen ekosysteemin laajuuden vuoksi. Vaikka uudet standardit lisäävät syntaktista sokeria, niiden saaminen selaimien tueksi vie aikaa. Babel kiertää tämän ongelman automaattisen transpiloinnin avulla.

Tuotteen idea on yksinkertainen: Babel ottaa ES6- tai ES7-koodin ja korvaa uudet syntaktiset elementit emulointikoodilla. Sen tuotos vahvistaa klassisen JavaScript-syntaksin ja toimii vanhemmissa selaimissa, kuten Internet Explorerissa.

Babelin ensimmäinen julkaisu valloitti maailman. Pian sen ensiesiintymisen jälkeen erilaiset kehykset, kuten React, Vue ja Ember, ottivat sen omakseen. Kehittäjät käyttävät tuotetta usein tietämättä, että se toimii taustalla – useammalla kuin yhdellä suositulla npm-projektilla on riippuvuus Babelista.

  • How to make an app

Nämä riippuvuudet muuttivat edeltäjän julkaisuprosessin ristiriitoja täynnä olevaksi. Versio 7, jota edelleen hallinnoi pieni ylläpitäjätiimi, pyrki näin ollen olemaan mahdollisimman yhteensopiva. Rikkovia muutoksia on vain vähän, ja koodin tuottamisen laatu pysyy korkeana (jos työskentelet tiimin kanssa, asiakirjojen tallentaminen pilvitallennukseen auttaa teitä pysymään yhtenäisinä).

Jos et ole aiemmin työskennellyt Babelin kanssa, anna tämän olla oppaasi. Pystyt käyttämään kehittyneitä JavaScript-ominaisuuksia ilman yhteensopivuushuolia, mikä tekee elämästäsi paljon helpompaa.

Haluaisitko joitain työkaluja, jotka virtaviivaistavat prosessia? Oppaamme parhaasta verkkosivuston rakentajasta auttaa. Haluatko pitkäaikaista tukea? Hanki oikea webhotellipalvelu.

Versiotarkistus

Babel asuu yleensä Node-ajoympäristössä. Aloitetaan tarkistamalla käytetyt versiot. Tulosteessa annetaan version tila, joka löytyy Ubuntu 14.04 -työasemasta, jota käytettiin seuraavan artikkelin luomiseen. Tämä ei ole pedanttisuutta – tähän vaiheeseen liittyvä kuva osoittaa, että Babel-tiimi luopui tuesta melko monelle Node.js:n versiolle.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Pakettien nimien muuttuminen

Yksi mullistavaksi muutokseksi versiossa 7 on ollut Babel-pakettien siirtäminen omaan nimiavaruuteensa. Vanhempia paketteja ei poistettu eri arkistoista. Tämä on tärkeää, sillä vanhojen pakettien nimien käyttö johtaa tämän vaiheen oheisessa kuvassa esitettyyn tilanteeseen.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Lisää rakennustoiminto

Yllä olevassa vaiheessa oletetaan, että työskentelet npm-projektin sisällä. Siinä tapauksessa Babelin ajaminen build actionin kautta on helppoa. Avaa package.json ja muokkaa sitä alla olevan koodin osoittamalla tavalla:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpileeraa koodi käsin

Babelin käynnistämiseen kuuluu build actionin laukaiseminen. Tämä onnistuu parhaiten npm run -komennolla. Arvo -d ilmoittaa Babelille, että tulokset on sijoitettava lib-kansioon – tähän vaiheeseen liittyvä kuva osoittaa, että kansio luodaan lennossa.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Kysymys konfiguraatiosta

Babelin kutsuminen ilman muita konfiguraatioasetuksia ei mahdollista transpilointia. Koodi voidaan transpiloida vain, jos kehys saa lisätietoa kohdeympäristöstä. Tämä voidaan tehdä komentoriviparametrin avulla tai luomalla projektin juureen tiedosto nimeltä .babelrc.

Babelrc:n konfigurointi

Babel konfiguroi itsensä joukolla liitännäisiä (plugins), joista kukin soveltaa transpilointimuunnoksia koodipohjaan. Käytämme preset-env-pakettia – sen mukana tulee valmiiksi konfiguroitu joukko muunnoksia, joiden tarkoitus on kattaa useimmat perusteet.

{"presets": }

Aika testata

Lisäämme index.js:ään hieman uuden ajan JavaScriptiä testataksemme ohjelmaa elävää koodia vastaan. Tämän vaiheen mukana tuleva koodi ei toimisi vanhoissa selaimissa – kun se on tehty, implisiittinen funktio korvataan tavallisella deklaraatiolla, kuten kuvassa näkyy.

function tamstest(){.map((n) => n + 1);}

Säädä kohdentamista

preset-env soveltaa oletusarvoisesti suurinta osaa transpiloinneista: tuotteen tavoitteena on luoda universaalisti yhteensopivaa JavaScriptiä kaistanleveys- ja suorituskykykustannuksista välittämättä. Voit muuttaa sen asetuksia välittämällä targets-olion – alla oleva esimerkki kohdistuu tiettyihin Chrome- ja IE-versioihin.

{"presets": ]}

Kehittynyt kohdistaminen

Babelin selainten kohdistaminen ei rajoitu vain Chromeen ja Internet Exploreriin. Yhteistyön ansiosta browserslistin kanssa kehittäjät voivat yhdistellä ja valita yli tusinasta kohteesta, kuten alla näkyy.

Nimet ovat isoja ja pieniä kirjaimia erottelemattomia:

  • Android Android WebView:lle.
  • Baidu Baidu Browser:lle.
  • BlackBerry tai bb for Blackberry browser.
  • Chrome for Google Chrome.
  • ChromeAndroid tai and_chr for Chrome for Android.
  • Edge for Microsoft Edge.
  • Electron for Electron framework. Se muunnetaan Chrome-versioksi.
  • Explorer tai ie for Internet Explorer.
  • ExplorerMobile tai ie_mob for Internet Explorer Mobile.
  • Firefox tai ff for Mozilla Firefox.
  • FirefoxAndroid tai and_ff for Firefox for Android.
  • iOS tai ios_saf for iOS Safari.
  • Node for Node.js.Opera for Opera.
  • OperaMini tai op_mini for Opera Mini.
  • OperaMobile tai op_mob for Opera Mobile.
  • QQAndroid tai and_qq for QQ Browser for Android.
  • Safari for desktop Safari.
  • Samsung for Samsung Internet.
  • UCAndroid tai and_uc for UC Browser for Android.

Advanced targeting, part two

Browserlist voi ottaa vastaan myös kehittyneitä kyselyitä. Sen etusivulla luetellaan konfiguraatioasetukset, joista lähes kaikkia voidaan käyttää myös Babelin sisällä muuttamalla babelrc:tä. Kyselyt voidaan arvioida paikallisesti, jos työasemallasi on asennettuna npx.

{"targets": "> 0.25%, not dead"}

Automaattinen transpilointi

Babelin kutsuminen käsin käy nopeasti tylsäksi. Nodeemon-apuohjelma tarkkailee tiedostojärjestelmän resursseja ja laukaisee komentoja, kun muutoksia havaitaan. Teoriassa nodemon-tuen lisääminen hoituu pienellä muutoksella package.jsoniin.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Tarkista läsnäolo

Joidenkin työasemien nodemon on asennettu globaalisti. Jos näin ei ole, ohjelman kutsuminen antaa alla olevan kaltaisen virheilmoituksen. Onneksi nodemon käyttöönotto onnistuu helposti komennolla npm install. 

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Tarkista toimivuus

Käynnistä npm start terminaali-ikkunassa ja jatka index.js:n sisällön muuttamista editorilla, kuten gedit tai Visual Studio Code. Tallennuksen jälkeen nodemon antaa tilatietoja.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Korjaa transpilointi

Vaikka nodemon-tunnistuksen pitäisi toimia tässä vaiheessa moitteettomasti, lib:stä löytyvän index.js-tiedoston sisältö ei päivity. Tämä johtuu babel-noden hienoudesta – se ei kiinnitä transpiloituja tiedostoja levylle. Sen sijaan se laukaisee muokatun version Node CLI:stä, joka toimii transpiloitujen tiedostojen kanssa.

Transpiloi koodia ohjelmallisesti

Babel ei rajoitu vain komentorivillä toimimiseen. Jos oikeat paketit on asennettu, koodia voidaan kääntää myös toisesta ohjelmasta. Tähän vaiheeseen liittyvä pätkä soveltaa joukon perusmuuntoja syötettyyn merkkijonoon. Muista, että konfiguraatioasetukset saadaan yleensä babelrc-tiedostosta.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpilaa kokonaisia tiedostoja

Lähdekoodia ei yleensä tallenneta merkkijonomuuttujiin. Babel API ottaa tämän huomioon joukolla tiedostoihin liittyviä funktioita, jotka luopuvat syöttömerkkijonosta tiedostonimellä varustetun muuttujan kohdalla. Tulokset palautetaan kuitenkin tavallisena JavaScript-muuttujana.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Synkroninen ja asynkroninen

Babel 7 otti käyttöön synkroniset ja asynkroniset versiot useimmista API-kutsuista. Varmista, että valitset tarpeisiisi sopivan vaihtoehdon – vaikka pienten esimerkkien transpilointi voidaan tehdä lennossa, Babelin vapauttaminen monimutkaisempiin tiedostoihin voi helposti johtaa kymmenien sekuntien viiveisiin.

Opi yksittäisistä liitännäisistä

Jos joskus huomaat ihmetteleväsi, mitä taustalla tapahtuu, käy yksinkertaisesti tällä sivulla. Siellä on luettelo kaikista Babel-jakelussa tällä hetkellä olevista liitännäisistä, ja se sisältää myös muutamia vinkkejä kaikille niille, jotka haluavat luoda oman liitännäisen.

TypeScriptin erityispiirteet pois

Babel ei rajoitu vain uuden ajan JavaScript-elementtien transpilointiin. Tuote sisältää ominaisuuksiltaan rajoittuneen TypeScript-moottorin. Se riisuu tyypitystiedot pois ja korvaa kehittyneet elementit. Valitettavasti Babel ei suorita tyypintarkistusta – tämä poistaa yhden TypeScript-kielen merkittävimmistä eduista.

{"presets": }

Käynnistä Babel verkossa

Vaikka transpilointitoiminnot toimivat yleensä sujuvasti, ongelmia esiintyy joskus. Siinä tapauksessa Babel REPL on avuksi. Se ajaa Babelia työasemasi selaimessa ja näyttää syötteen ja tulosteen aivan vierekkäin.

Tutustu kipupisteisiin

Esittelyssämme kerrottiin, että Babelia käytetään laajalti eri projekteissa. Babelin ylläpitäjätiimi yksinkertaistaa versiopäivityksiä yksityiskohtaisen muutoslokin avulla. Jos käytät Babelia ohjelmallisesti, älä unohda tutustua API-päivitysoppaaseen.

Tämä artikkeli julkaistiin alun perin luovan webdesign-lehden Web Designer numerossa 283. Osta numero 283 täältä tai tilaa Web Designer täällä.

  • How to code faster, lighter JavaScript
  • 5 awesome Javascript APIs
  • 27 top-class website templates

Leave a Reply