Requirements: Fetch Event Source is an SSE streaming implemented by Microsoft, built using NPM packages, cannot be used directly on the browser, and requires the NPM package to be compiled into a browser-executed JavaScript script.
NPM is a Node package management tool, which is implemented based on the Node API standard, while JavaScript is a scripting language that runs in the browser, based on the ECMAScript standard. Due to the different standards, NPM packages cannot be run directly on the browser.
Commonly used packaging tools:
- Webpack: Webpack is one of the most popular front-end packaging tools available, it can handle JavaScript, stylesheets, images, and other resources, and supports modular development.
- Parcel: Parcel is a zero-configuration packaging tool that automatically handles dependencies and packages projects, making it ideal for building projects quickly.
- Rollup: Rollup focuses on packaging JavaScript libraries, which can package multiple modules into a single file, and supports Tree Shaking optimization.
- Browserify: Browserify allows you to use Node.js's module system in your browser, which can package CommonJS modules into browser-recognizable code.
- Grunt: Grunt is a task automation tool that can be used to package, compress, merge, and other operations such as code packaging.
- Gulp: Similar to Grunt, Gulp is a task automation tool, but it uses code over configuration to make task definitions more concise and clear.
- Brunch: Brunch is a fast and easy front-end packaging tool that can handle JavaScript, CSS, HTML, and other files, and supports plugin extensions.
This article requires two tools:browserify、minify(Compressor for JS, CSS, HTML, and IMG files)
First, create a new folder and quickly initialize a Node project with the following command:
revisepackage.jsonThe document reads as follows:
Install browserify, minify, fetch-event-source, the command is as follows:
Execute the compilation command as follows:
Where: -r specifies the npm package name to be compiled -s The module name used in the code (custom name according to your own habits)
After the execution is completed, the event.min.js is the compressed file, as shown in the figure below:
Copy the event.min.js content to the browser console for testing, as shown in the image below:
(End)
|
Posted on 4/25/2024 8:28:21 PM
|
|
|
|
