Kuidas parendada esikülje arendamise kogemust ilma punkerita

Vaadake, kuidas saate ES6 mooduleid ja teenindustöötajaid veebirakenduse käivitamiseks ilma Webpackita või koondamata.

Tüüpiline näide arendajast, kes ootab komplekti valmimist.

Sissejuhatus

Saadaval ka itaalia keeles

ECMAScript 2015 (ES6) spetsifikatsioon viis JavaScripti ja veebiarenduse uude ajastusse, mis koosneb puhastest süntaksidest, lähtefailide parematest tellingutest ja muudest programmeerimiskontekstidest - näiteks staatilise koodianalüüsi, sõltuvussüsteemide, automaatse täitmise ja muu - saadaval olevatest arendaja tööriistadest. .

Kõik see maksis hinnaga: brauseris veebirakenduse käivitamiseks võib nüüd vaja minna sadu sõlme mooduleid, jälgijat failimuudatuste tuvastamiseks ja allikate ümberehituste kurnavat kasutamist. Mõni sekund kadunud võib hõlpsalt muutuda nädalateks tundideks, kettaruumi raiskamiseks, RAMi ja CPU suureks tarbimiseks ning aeglase jõudlusega arvutite jaoks pöörlevad ventilaatorid nagu lennundusmootorid.

Juhtumiuuring

Arendajana tahaksin luua klassikalise ülesandeloendi rakenduse, kasutades JSX-i toega komponentide teeki ja käivitada see brauseris ilma, et peaksin alustama kimbu, siirdaja ja jälgija käivitamist.

Ütleme nii, et me kõik armastame Preakti (nii nagu see peakski olema) - ainuüksi katlaplaadi (ja selle sõltuvuste) hankimine tähendab ~ 1 500 sõlmemooduli, ~ 26 000 faili allalaadimist ja kogu kettaruumi nõudmist umbes 200 MB. Enamikku neist sõltuvustest kasutatakse Webpacki küpsetatud veebiserveri käitamiseks.

Kuid me ei soovi seda kõike, seega peame lootma ainult kaasaegse brauseri funktsioonidele.

Kuidas ES6 / 7 / X rakendust brauserisse laadida ilma kimbuta

Kuna Chrome 62, Edge 16, Safari 11 ja Firefox 54 on võimalik ES6-moodulit brauserisse importida:

Kui HTML-i parser vastab sellele sildile, tõmbab see määratud lähtefaili ja lahendab rekursiivselt kõik impordi ja ekspordi avaldused.

Ehkki see uus funktsioon on imeline, ei piisa sellest moodsa ja keeruka veebirakenduse käivitamiseks. Brauserid suudavad lahendada ainult suhtelised sõltuvused ja neil puudub teave NPM-sõltuvuste kohta. Lisaks viskab JSX-i kasutamine mitu süntaksivigu, kuna see pole JavaScripti keele standard.

Päästetöötajad

Kui kõik tundub kadununa, tulevad teenindajad meile appi. Pärast registreerimist saavad need eritöötajad võrgutaotlusi pealt kuulata ja nende vastustega tegeleda.

Seega võime SW-d kasutada:

  • pealt kinni pidada JavaScripti taotlusi;
  • failide toomine;
  • otsige mitte-suhtelise impordi avaldusi ja moodustage need kausta node_modules;
  • tuvastada JSX-i süntaks ja siirdada kõik JSX-i avaldised JavaScripti;
  • tagastab muudetud failid põhilõnga.

Sel hetkel peaks brauser saama JavaScripti failidega hakkama ja lahendada nende sõltuvused.

Lisateave MDN-i teenindustöötajate kohta: teenindustöötajate kasutamine

Aheldamata arendamine

Unchained on GitHubis hostitud kontseptsiooni tõestus, mis selle idee ellu viib. Nagu kimbud ja siirdajad, mida me juba kasutame, oli selle eesmärk jagada protsess etappideks ja see on ühendatav.

See pakub kasulikke abistajaid teenindustöötajate registreerimisel, dünaamilise impordi toetamiseks kasutatava polüetäidise ja selle tuum (sarnaselt pakkimis API-le) saab JavaScripti failide impordi lahendada järgmiste toimingute abil:

  • Transformatsioon: lähtekoodi ja mittestandardsete süntakside transpilatsiooni muutmiseks;
  • Lahendus: impordi avalduste otsimine ja lahendamine;
  • Lõpetamine: genereerib koodi tagasi.

Kõiki viimase komplekti värskendusi tehakse Babeli eraldiseisva versiooniga - Babeli jaotusega, mis töötab brauseris ja võimaldab pistikprogrammidel faili abstraktse süntaktipuu (AST) otsest haldamist, muudatuste jälgimist ja lõpliku lähtekaardi genereerimist.

Järgmised ühendamata pistikprogrammid on juba saadaval (ja üsna tavalised):

  • ühine: asendab CommonJS-i avaldised, näiteks nõua andmodule.exports, ES6-avaldustega;
  • babel: suhtleb Babel Standalone ja selle pistikprogrammidega, et siirdada mittestandardseid süntakse nagu JSX, Flow või Typescript (!);
  • tekst: teisendab tekstifailid ES6 mooduliteks;
  • json: teisendab JSON-failid ES6 mooduliteks;
  • env: keskkonnamuutujate sisestamine (läbi viidud JavaScripti objekti kasutades, kuna brauseritel pole otsest juurdepääsu tegelikele env muutujatele);
  • lahendama: on sõlme lahutusalgoritmi osaline rakendamine.

Lisaks kasutab Unchained brauseri vahemälu liidest juba lahendatud failide vahelejätmiseks. ETagi päise abil saab see ka muudatusi tuvastada, nii et lehe uuesti laadimine ja koodi sisestamine on kuradi kiire.

Tehke arendaja õnnelikuks

Naastes meie juhtumisse, võime mõelda lahendusele ja selle rakendamiseks kasutame lihtsat näidet, mida kuvatakse preactjs.com avalehel.

Projekti seadistamine

Alguses vajame ainult kahte sõltuvust:

npm init -y
npm install preact unchained-js
# 2 moodulit, 65 eset, <2 MB

ja järgmised failid:

  • index.html: kus teenuse töötaja registreeritakse ja rakendusefailid imporditakse
  • sw.js: registreeritav teenindustöötaja. Lähtekoodi edastamiseks kasutab ta ketita ketti
  • index.js: peamine JavaScripti fail
  • todolist.component.js: komponentide klassi TodoList määratlus.

Nüüd käivitage lihtsalt kohalik server (siin ülemaailmselt installitud):

npm install -g http-server
http-server.

ja… tehtud!

Konsoolis logib Unchained kõik käivitamisel imporditud failid: hiljem kavatseb see vahemälu kasutada järgmiste uuesti laadimiste jaoks.

Iga faili muudatuse korral, nt. kui muudame nupu silti saidil todolist.component.js ja salvestame, laadib brauser uuesti ainult selle faili.

Selle näite Git-projekti leiate siit.

Järeldused

Vaatamata sellele, et brauseri tugi on piiratud Chrome'i ja Firefoxiga (kuna selle puhul pole see vaikimisi saadaval, kuid peate sisse lülitama lipu dom.moduleScripts.enabled), arvan, et see lähenemisviis võib projekti struktuuri ja selle konfiguratsiooni lihtsustada:

  • see vähendab märkimisväärselt paigaldatavate sõltuvuste hulka;
  • ümberpaigutamine ei blokeeri peamist kasutajaliidese lõime, sest kõik toimub teenindustöötaja kontekstis;
  • pärast esimest käivitamist on lähtekoodi värskendused tõesti kiired;
  • koodide jagamine dünaamilise impordi () abil lihtsalt töötab;
  • lähtekaartide tugi.

Kuid on ka miinuseid:

  • esimene käivitamine pole tulemuslik (otsesele failisüsteemile juurdepääsu puudumise ja vajaduse tõttu luua iga faili jaoks AST) tõttu;
  • Puude rappimine puudub, funktsioon on saadaval koondaruandes ja Webpack 4-s.

Päris test

Ülesannete loendi rakenduses on asjad alati lihtsad, kuid kuidas on lood pärismaailma näidetega? Asendasin Rollupi Unchainediga keerulises projektis, mille kallal töötan ja millel on palju sõltuvusi, näiteks jQuery, Moment, CKEditor ja komponentide teek, järgmiste tulemustega:

Võrdlus tehti MacBook Pro (Retina, 15-tolline, 2015. aasta keskpaik) ja Chrome 63.0.3239.84-ga

Tulevik

Ehkki Unchained hõlmab selle lihtsa uuringu kõiki aspekte, tahaksin siiski mõnda teemat süvendada ja tulemusi parandada:

  • kiirendada esimest täitmist, kasutades ainult AST-teisendusi (keelatud, kuna hetkel on probleem allikakaartide genereerimisega);
  • kontrollige, kas Turbo on võimalik kohe integreerida, et parandada mitte-suhtelise tee eraldusprotsessi;
  • laiendage ühilduvust brauseritega, mis ei toeta teenindustöötajaid ega ES6 mooduleid;
  • laiendage tuge sõlmekeskkonnale, et saada rakenduste kimbud, mis on 100% ühilduvad brauserisisese eelvaatega;
  • blob (piltide ja fontide laadimiseks) ja postCSS pluginad.
Eriline tänu
Suured tänud xhole ja SteRosanellile nende kannatlikkuse eest selle artikli ülevaatamisel.