Nõuded: Fetch Event Source on Microsofti poolt rakendatud SSE voogedastus, mis on loodud NPM-pakettide abil, seda ei saa otse brauseris kasutada ning nõuab NPM-paketi kompileerimist brauseris käivitatavaks JavaScripti skriptiks.
NPM on Node'i pakettide haldamise tööriist, mis põhineb Node API standardil, samas kui JavaScript on skriptikeel, mis töötab brauseris ECMAScript standardi alusel. Erinevate standardite tõttu ei saa NPM-pakette otse brauseris käivitada.
Levinumad pakenditööriistad:
- Webpack: Webpack on üks populaarsemaid front-end pakendamisi tööriistu, mis suudab hallata JavaScripti, stiililehti, pilte ja muid ressursse ning toetab modulaarset arendust.
- Parcel: Parcel on nullkonfiguratsiooniga pakendamistööriist, mis automaatselt haldab sõltuvusi ja pakendab projekte, muutes selle ideaalseks kiireks projektide ehitamiseks.
- Rollup: Rollup keskendub JavaScripti teekide pakendamisele, mis võimaldavad mitut moodulit ühte faili pakkida ning toetab puu raputamise optimeerimist.
- Browserify: Browserify võimaldab kasutada Node.js moodulisüsteemi oma brauseris, mis suudab pakkida CommonJS mooduleid brauseri äratuntavaks koodiks.
- Grunt: Grunt on ülesannete automatiseerimise tööriist, mida saab kasutada pakkimiseks, tihendamiseks, ühendamiseks ja muude toimingute, näiteks koodipakkimise jaoks.
- Gulp: Sarnaselt Gruntile on Gulp ülesannete automatiseerimise tööriist, kuid see kasutab koodi konfiguratsiooni asemel, et muuta ülesannete definitsioonid selgemaks ja kokkuvõtlikumaks.
- Brunch: Brunch on kiire ja lihtne esipaneeli tööriist, mis suudab hallata JavaScripti, CSS-i, HTML-i ja muid faile ning toetab pluginalaiendeid.
Selle artikli jaoks on vaja kahte tööriista:browserify、Minify(JS, CSS, HTML ja IMG failide kompressor)
Esmalt loo uus kaust ja initsialiseeri kiiresti Node'i projekt järgmise käsuga:
Läbi vaadatapackage.jsonDokument kõlab järgmiselt:
Install browserify, minify, fetch-event-source, käsk on järgmine:
Täida kompileerimiskäsk järgmiselt:
Kus: -r määrab kompileeritava npm paketi nime -s Koodis kasutatud mooduli nimi (kohandatud nimi vastavalt sinu enda harjumustele)
Pärast täitmise lõpetamist on event.min.js tihendatud fail, nagu alloleval joonisel näidatud:
Kopeeri event.min.js sisu testimiseks brauseri konsooli, nagu alloleval pildil näidatud:
(Lõpp)
|