Exigences : Fetch Event Source est un streaming SSE implémenté par Microsoft, construit à partir de packages NPM, ne peut pas être utilisé directement sur le navigateur, et nécessite que le package NPM soit compilé dans un script JavaScript exécuté par le navigateur.
NPM est un outil de gestion de paquets Node, implémenté selon la norme Node API, tandis que JavaScript est un langage de script qui s’exécute dans le navigateur, basé sur la norme ECMAScript. En raison des différentes normes, les paquets NPM ne peuvent pas être exécutés directement sur le navigateur.
Outils d’emballage couramment utilisés :
- Webpack : Webpack est l’un des outils de packaging front-end les plus populaires disponibles, il peut gérer JavaScript, des feuilles de style, des images et d’autres ressources, et supporte le développement modulaire.
- Parcel : Parcel est un outil de regroupement sans configuration qui gère automatiquement les dépendances et empaquete les projets, ce qui le rend idéal pour construire rapidement des projets.
- Rollup : Rollup se concentre sur l’empaquetage de bibliothèques JavaScript, qui peuvent empaqueter plusieurs modules en un seul fichier, et prend en charge l’optimisation par Tree Shaking.
- Browserify : Browserify vous permet d’utiliser le système de modules de Node.js dans votre navigateur, qui peut empaqueter des modules CommonJS en code reconnaissable par le navigateur.
- Grunt : Grunt est un outil d’automatisation des tâches qui peut être utilisé pour empaqueter, compresser, fusionner et effectuer d’autres opérations telles que l’emballage de code.
- Gulp : Similaire à Grunt, Gulp est un outil d’automatisation des tâches, mais il utilise le code plutôt que la configuration pour rendre les définitions des tâches plus concises et claires.
- Brunch : Brunch est un outil de packaging front-end rapide et facile capable de gérer JavaScript, CSS, HTML et d’autres fichiers, et prend en charge les extensions de plugins.
Cet article nécessite deux outils :browserify、Rapetisser(Compresseur pour fichiers JS, CSS, HTML et IMG)
Commencez par créer un nouveau dossier et initialiser rapidement un projet Node avec la commande suivante :
réviserpackage.jsonLe document se lit comme suit :
Install browserify, minify, fetch-event-source, la commande est la suivante :
Exécutez la commande de compilation comme suit :
Où : -r spécifie le nom du paquet npm à compiler -s Le nom du module utilisé dans le code (nom personnalisé selon vos propres habitudes)
Après l’exécution, le event.min.js est le fichier compressé, comme montré dans la figure ci-dessous :
Copiez le contenu event.min.js dans la console du navigateur pour les tester, comme montré dans l’image ci-dessous :
(Fin)
|
Publié sur 25/04/2024 20:28:21
|
|
|
|
