Követelmények: A Fetch Event Source egy Microsoft által implementált SSE streaming, NPM csomagokkal építve, nem használható közvetlenül a böngészőben, és az NPM csomagot böngésző által futtatott JavaScript szkriptbe kell fordítani.
Az NPM egy Node csomagkezelő eszköz, amely a Node API szabvány alapján valósul meg, míg a JavaScript egy böngészőben futó szkriptnyelv, az ECMAScript szabvány alapján. A különböző szabványok miatt az NPM csomagokat nem futtathatják közvetlenül a böngészőn.
Leggyakrabban használt csomagolóeszközök:
- Webpack: A Webpack az egyik legnépszerűbb front-end csomagoló eszköz, képes kezelni JavaScriptet, stíluslapokat, képeket és egyéb erőforrásokat, valamint támogatja a moduláris fejlesztést.
- Parcel: Parcel egy nulla konfigurációjú csomagolási eszköz, amely automatikusan kezeli a függőségeket és csomagolja a projekteket, így ideális a projektek gyors építéséhez.
- Rollup: A Rollup a JavaScript könyvtárak csomagolására fókuszál, amelyek több modult is képesek egyetlen fájlba csomagolni, és támogatja a fa rázkódás optimalizálását.
- Browserify: A Browserify lehetővé teszi, hogy a Node.js modulrendszerét használd a böngésződben, amely képes a CommonJS modulokat böngésző által felismerhető kódba csomagolni.
- Grunt: A Grunt egy feladatautomatizálási eszköz, amely csomagolható, tömöríthető, összevonható és egyéb műveletek, például kódcsomagolás céljából is használható.
- Gulp: Hasonlóan a Grunthoz, a Gulp is egy feladatautomatizálási eszköz, de a konfiguráció helyett a kódot használja, hogy a feladatdefiníciók tömörebbek és világosabbak legyenek.
- Brunch: Brunch egy gyors és egyszerű front-end csomagolóeszköz, amely képes kezelni JavaScriptet, CSS-t, HTML-t és más fájlokat, valamint támogatja a plugin bővítményeket.
Ez a cikk két eszközre van szükség:Browserify、Kisebbít(Kompresszor JS, CSS, HTML és IMG fájlokhoz)
Először hozzon létre egy új mappát, és gyorsan inicializálja a Node projektet a következő parancssal:
átnézpackage.jsonA dokumentum a következőképpen szól:
Install browserify, minify, fetch-event-source, parancs a következő:
A fordítási parancsot a következőképpen hajtsa végre:
Ahol: -r megadja a fordítandó npm csomagnevet -s A kódban használt modul név (egyedi név a saját szokásaid szerint)
A végrehajtás befejezése után a event.min.js a tömörített fájl, ahogy az alábbi ábrán látható:
Másold le a event.min.js tartalmat a böngészőkonzolra tesztelésre, ahogy az alábbi képen látható:
(Vége)
|