Requisitos: Fetch Event Source es un streaming SSE implementado por Microsoft, construido con paquetes NPM, no puede usarse directamente en el navegador y requiere que el paquete NPM se compile en un script JavaScript ejecutado por el navegador.
NPM es una herramienta de gestión de paquetes Node, que se implementa basada en el estándar Node API, mientras que JavaScript es un lenguaje de scripting que se ejecuta en el navegador, basado en el estándar ECMAScript. Debido a los diferentes estándares, los paquetes NPM no pueden ejecutarse directamente en el navegador.
Herramientas de embalaje más usadas:
- Webpack: Webpack es una de las herramientas de empaquetado front-end más populares disponibles, puede manejar JavaScript, hojas de estilo, imágenes y otros recursos, y soporta desarrollo modular.
- Parcel: Parcel es una herramienta de empaquetado sin configuración que gestiona automáticamente dependencias y empaqueta proyectos, lo que la hace ideal para construir proyectos rápidamente.
- Rollup: Rollup se centra en empaquetar bibliotecas JavaScript, que pueden empaquetar múltiples módulos en un solo archivo y soportan la optimización Tree Shaking.
- Browserify: Browserify te permite usar el sistema de módulos de Node.js en tu navegador, que puede empaquetar módulos CommonJS en código reconocible por el navegador.
- Grunt: Grunt es una herramienta de automatización de tareas que puede usarse para empaquetar, comprimir, fusionar y otras operaciones como empaquetado de código.
- Gulp: Similar a Grunt, Gulp es una herramienta de automatización de tareas, pero utiliza el código en lugar de la configuración para hacer las definiciones de tareas más concisas y claras.
- Brunch: Brunch es una herramienta de empaquetado front-end rápida y sencilla que puede manejar JavaScript, CSS, HTML y otros archivos, y soporta extensiones de plugins.
Este artículo requiere dos herramientas:Browserify、Minify(Compresor para archivos JS, CSS, HTML e IMG)
Primero, crea una nueva carpeta e inicializa rápidamente un proyecto Node con el siguiente comando:
revisarpackage.jsonEl documento dice lo siguiente:
Install browserify, minify, fetch-event-source, el comando es el siguiente:
Ejecuta el comando de compilación de la siguiente manera:
Donde: -r especifica el nombre del paquete npm a compilar -s El nombre del módulo usado en el código (nombre personalizado según tus propios hábitos)
Tras completar la ejecución, el event.min.js es el archivo comprimido, como se muestra en la figura siguiente:
Copia el contenido event.min.js a la consola del navegador para probarlo, como se muestra en la imagen de abajo:
(Fin)
|
Publicado en 25/4/2024 20:28:21
|
|
|
|
