Kuinka parantaa Frontend Dev -kokemusta ilman niputinta

Katso, kuinka voit käyttää ES6-moduuleja ja huoltotyöntekijöitä verkkosovelluksen käynnistämiseen ilman Webpackia tai koonnista.

Tyypillinen esimerkki kehittäjästä, joka odottaa paketin olevan valmis.

esittely

Saatavana myös italian kielellä

ECMAScript 2015 (ES6) -määritys toi JavaScriptin ja web-kehityksen uudelle aikakaudelle, joka on valmistettu puhtaista syntaksista, paremmasta lähdetiedostojen telineestä ja joukosta kehittäjätyökaluja, jotka ovat saatavilla muissa ohjelmointikonteksteissa - kuten staattisen koodianalyysin, riippuvuusjärjestelmien, automaattisen täydennyksen ja muun .

Kaikki tämä tapahtui hinnalla: Web-sovelluksen käynnistäminen selaimessa voi nyt vaatia satoja solmumoduuleja, tarkkailijaa tiedostomuutosten havaitsemiseksi ja lähteiden uudelleenrakentamisen uuvuttavaa. Muutamasta sekunnista menetetty voi helposti muuttua tunteiksi viikossa, levytilan tuhlausta, äärimmäistä RAM- ja CPU-kulutusta ja hitaasti toimivissa tietokoneissa puhaltimet pyöriä kuin ilmailumoottorit.

Tapaustutkimus

Kehittäjänä haluaisin luoda klassisen Tehtäväluettelosovelluksen, joka käyttää komponenttikirjastoa JSX-tuella ja ajaa sitä selaimessa ilman, että tarvitsen käynnistämään niputtajaa, siirtäjää ja tarkkailijaa.

Oletetaan, että me kaikki rakastamme Preaktia (niin kuin sen pitäisi olla) - kattilalevyn (ja sen riippuvuuksien) hankkiminen yksin tarkoittaa ~ 1 500 solmumodulin, ~ 26 000 tiedoston lataamista ja vaatii noin 200 Mt kovalevyn tilaa. Suurinta osaa näistä riippuvuuksista käytetään Webpackin leipoman Web-palvelimen suorittamiseen.

Emme kuitenkaan halua mitään tästä, joten meidän on luotettava vain modernin selaimen ominaisuuksiin.

Kuinka ladata ES6 / 7 / X-sovellus selaimeen ilman niputinta

Koska Chrome 62, Edge 16, Safari 11 ja Firefox 54, on mahdollista tuoda ES6-moduuli selaimeen:

Kun HTML-jäsenijä täyttää tämän tunnisteen, se hakee määritetyn lähdetiedoston ja ratkaisee rekursiivisesti kaikki tuonti- ja vienti-lausunnot.

Vaikka tämä uusi ominaisuus on upea, se ei riitä käynnistämään moderni ja monimutkainen web-sovellus. Selaimet pystyvät ratkaisemaan vain suhteelliset riippuvuudet, eikä heillä ole tietoa NPM-riippuvuuksista. Lisäksi JSX-käyttö heittää useita syntaksivirheitä, koska se ei ole JavaScript-kielen standardi.

Palvelun työntekijät pelastamiseksi

Kun kaikki näyttää kadonnut, huoltotyöntekijät tulevat auttamaan. Rekisteröityään nämä erityistyöntekijät voivat siepata verkkopyynnöt ja käsitellä vastauksiaan.

Joten voimme käyttää SW: tä:

  • siepata JavaScript-pyynnöt;
  • noutaa tiedostot;
  • etsi ei-suhteellisia tuontikäskyjä ja tee ne uudelleen node_modules-kansioon;
  • havaita JSX-syntaksi ja siirtää kaikki JSX-lausekkeet JavaScriptiin;
  • palauta muutetut tiedostot pääketjuun.

Tässä vaiheessa selaimen pitäisi pystyä käsittelemään JavaScript-tiedostoja ja ratkaisemaan niiden riippuvuudet.

Lisätietoja MDN: n palvelustyöntekijöistä: Palvelun työntekijöiden käyttäminen

Kehittäminen ketjuton

Ketjuton on todiste GitHubin ylläpitämästä konseptista, joka toteuttaa tämän idean käytännössä. Kuten jo käyttämämme nippimet ja siirräjät, se on suunniteltu jakamaan prosessi vaiheisiin ja se on kytkettävissä.

Se tarjoaa hyödyllisiä auttajia palvelustyöntekijöiden rekisteröimiseksi, polyfill-täytön, joka tukee dynaamista tuontia, ja sen ydin (samanlainen kuin kokonaissovellusliittymä) voi ratkaista JavaScript-tiedostojen tuonnin seuraavien vaiheiden avulla:

  • Transformaatio: muuttaa lähdekoodia ja epästandardien syntaksien transpilaatiota;
  • Päätöslauselma: etsi ja ratkaise tuontitiedot;
  • Viimeistely: palauttaa luodun koodin.

Kaikki viimeisen paketin päivitykset tehdään Babel Standalone: ​​lla, Babel-jakelulla, joka toimii selaimessa ja mahdollistaa laajennusten käsitellä tiedoston Abstract Syntax Tree (AST) suoraan, seurata muutoksia ja luoda lopullinen lähdekartta.

Seuraavat ketjuttamattomat laajennukset ovat jo saatavilla (ja melko yksinkertaisia ​​tällä hetkellä):

  • yleinen: korvaa CommonJS-lausekkeet, kuten vaatia andmodule.exports, ES6-lauseilla;
  • babel: kommunikoi Babel Standalone: ​​n ja sen laajennusten kanssa epästandardien syntaksien, kuten JSX, Flow tai Typescript (!), siirtämiseksi;
  • text: muuntaa tekstitiedostot ES6-moduuleiksi;
  • json: muuntaa JSON-tiedostot ES6-moduuleiksi;
  • env: suorittaa ympäristömuuttujien injektoinnin (ohjattu JavaScript-objektilla, koska selaimilla ei ole suoraa pääsyä todellisiin env-muuttujiin);
  • ratkaisu: on solmun erotusalgoritmin osittainen toteutus.

Lisäksi Unchained käyttää selaimen välimuistiliittymää ohittaakseen jo ratkaisetut tiedostot. ETag-otsikon avulla se pystyy myös havaitsemaan muutokset, joten sivujen uudelleenlataukset ja koodin injektiot ovat pirun nopeita.

Tee kehittäjä onnelliseksi

Palaamalla tapaukseemme, voimme ajatella ratkaisua ja toteuttaaksemme sen yksinkertaisen esimerkin avulla, joka näytetään preactjs.com-sivuston kotisivulla.

Projektin asennus

Aluksi tarvitsemme vain kahta riippuvuutta:

npm init -y
npm asenna preact ketjuttamattomat-js
# 2 moduulia, 65 tuotetta, <2MB

ja seuraavat tiedostot:

  • index.html: missä palvelun työntekijä on rekisteröity ja sovellustiedostot tuodaan
  • sw.js: rekisteröitävä palvelustyöntekijä. Se käyttää Unchained kirjastoa lähdekoodin siirtämiseen
  • index.js: tärkein JavaScript-tiedosto
  • todolist.component.js: TodoList-komponenttiluokan määritelmä.

Suorita nyt vain paikallinen palvelin (täällä asennettu maailmanlaajuisesti):

npm asenna -g http-palvelin
http-palvelin.

ja… valmis!

Konsolissa Unchained kirjaa kaikki käynnistyksen yhteydessä tuodut tiedostot: myöhemmin se aikoo käyttää välimuistia seuraaviin latauksiin.

Jokaisessa tiedoston muutoksessa, esim. Jos muokkaamme painikkeen etikettiä todolist.component.js ja tallennamme, selain lataa vain kyseisen tiedoston.

Tämän esimerkin Git-projekti on saatavana täältä.

johtopäätökset

Vaikka selaimen tuki on rajoitettu Chromeen ja Firefoxiin (koska tätä se ei ole oletuksena käytettävissä, mutta sinun on otettava käyttöön lippu dom.moduleScripts.enabled), mielestäni tämä lähestymistapa voi yksinkertaistaa projektin rakennetta ja sen määrityksiä:

  • se vähentää huomattavasti asennettavien riippuvuuksien määrää;
  • transpilointi ei estä pääasiallista käyttöliittymän ketjua, koska kaikki tapahtuu palvelustyöntekijän yhteydessä;
  • ensimmäisen julkaisun jälkeen lähdekoodin päivitykset ovat todella nopeita;
  • koodinjako dynaamisella tuonnilla () vain toimii;
  • lähdekarttojen tuki.

Mutta on myös haittoja:

  • ensimmäinen käynnistys ei toimi (johtuen suoran tiedostojärjestelmän käytön puutteesta ja tarpeesta luoda AST jokaiselle tiedostolle);
  • puutarha puuttuu. Ominaisuus on käytettävissä Rollupissa ja Webpack 4: ssä.

Todellinen testi

Asiat ovat aina helppoja tehtäväluettelo-sovelluksessa, mutta entä reaalimaailman esimerkkejä? Korvasin Rollupin Unchained-hankkeella monimutkaisessa hankkeessa, jossa työskentelen, ja siinä on monia riippuvuuksia, kuten jQuery, Moment, CKEditor ja komponenttikirjasto, seuraavilla tuloksilla:

Vertailu MacBook Pron (Retina, 15-tuumainen, vuoden 2015 puoliväli) ja Chromen 63.0.3239.84 kanssa

tulevaisuus

Vaikka Unchained kattaa kaikki tämän yksinkertaisen tutkimuksen näkökohdat, haluaisin syventää joitain aiheita ja parantaa tuloksia:

  • nopeuttaa ensimmäistä suoritusta käyttämällä vain AST-muunnoksia (poistettu käytöstä, koska tällä hetkellä lähdekarttojen luomisessa on ongelma);
  • tarkistaa, onko Turbo mahdollista integroida, kun se on saatavilla, polkujen ei-suhteellisen resoluution prosessin parantamiseksi;
  • laajenna yhteensopivuus selaimiin, jotka eivät tue palvelun työntekijöitä tai ES6-moduuleja;
  • laajenna tuki solmuympäristöön saadaksesi sovelluspaketteja, jotka ovat 100% yhteensopivia selaimen sisäisen esikatselun kanssa;
  • blob (kuvia ja fontteja ladattaessa) ja postCSS-laajennukset.
Erityiskiitokset
Suuri kiitos xholle ja SteRosanellille heidän kärsivällisyydestään tämän artikkelin tarkistamisessa.