Vaatimukset: Fetch Event Source on Microsoftin toteuttama SSE-suoratoisto, joka on rakennettu NPM-paketeilla, sitä ei voi käyttää suoraan selaimessa ja vaatii NPM-paketin kääntämisen selaimessa suoritettavaksi JavaScript-skriptiksi.
NPM on Node-pakettien hallintatyökalu, joka on toteutettu Node API -standardin pohjalta, kun taas JavaScript on skriptikieli, joka toimii selaimessa ECMAScript-standardin pohjalta. Erilaisten standardien vuoksi NPM-paketteja ei voi ajaa suoraan selaimessa.
Yleisesti käytetyt pakkaustyökalut:
- Webpack: Webpack on yksi suosituimmista front-end-pakkaustyökaluista, se pystyy käsittelemään JavaScriptiä, tyylilomakkeita, kuvia ja muita resursseja sekä tukee modulaarista kehitystä.
- Parcel: Parcel on nollakonfiguraatio-pakkaustyökalu, joka käsittelee automaattisesti riippuvuuksia ja paketoi projekteja, mikä tekee siitä ihanteellisen nopeaan projektien rakentamiseen.
- Rollup: Rollup keskittyy JavaScript-kirjastojen pakkaamiseen, jotka voivat paketoida useita moduuleja yhdeksi tiedostoksi ja tukee Tree Shaking -optimointia.
- Browserify: Browserify mahdollistaa Node.js:n moduulijärjestelmän käytön selaimessasi, joka voi paketoida CommonJS-moduuleja selaimen tunnistamaan koodiin.
- Grunt: Grunt on tehtävien automaatiotyökalu, jota voidaan käyttää pakkaamiseen, pakkaamiseen, yhdistämiseen ja muihin toimintoihin, kuten koodin pakkaamiseen.
- Gulp: Samoin kuin Grunt, Gulp on tehtävien automaatiotyökalu, mutta se käyttää koodia konfiguroinnin sijaan, jotta tehtävien määrittelyt ovat tiiviimpiä ja selkeämpiä.
- Brunch: Brunch on nopea ja helppo käyttöliittymäpakkaustyökalu, joka pystyy käsittelemään JavaScriptiä, CSS:ää, HTML:ää ja muita tiedostoja sekä tukee laajennuksia.
Tämä artikkeli vaatii kaksi työkalua:browserify、Minify(Kompressori JS-, CSS-, HTML- ja IMG-tiedostoille)
Luo ensin uusi kansio ja käynnistä nopeasti Node-projekti seuraavalla komennolla:
tarkistaapackage.jsonAsiakirja kuuluu seuraavasti:
Asenna browserify, minify, fetch-event-source, komento on seuraava:
Suorita käännöskomento seuraavasti:
Missä: -r määrittää käännettävän npm-paketin nimen -s Koodissa käytetty moduulin nimi (mukautettu nimi omien tapojenne mukaan)
Suorituksen jälkeen event.min.js on pakattu tiedosto, kuten alla olevassa kuvassa näkyy:
Kopioi event.min.js sisältö selainkonsolille testattavaksi, kuten alla olevassa kuvassa näkyy:
(Loppu)
|
Julkaistu 25.4.2024 20.28.21
|
|
|
|
