将 NPM 包编译成浏览器可运行的 JavaScript 脚本

小渣渣

需求：Fetch Event Source 是微软实现的 SSE 流式处理，使用 NPM 包构建，无法在浏览器上面直接使用，需要将 NPM 包编译成浏览器可执行的 JavaScript 脚本。

NPM 是 Node 包管理工具，NPM 包是基于 Node API 标准实现，而 JavaScript 是运行在浏览器的脚本语言，基于 ECMAScript 标准实现。由于标准不一样，导致 NPM 包无法直接在浏览器上面运行。

常用的打包工具：

• Webpack： Webpack 是目前最流行的前端打包工具之一，它可以处理 JavaScript、样式表、图片等资源，并且支持模块化开发。
• Parcel： Parcel 是一款零配置的打包工具，它可以自动处理依赖关系并打包项目，非常适合快速搭建项目。
• Rollup： Rollup 专注于打包 JavaScript 库，它可以将多个模块打包成一个单独的文件，并且支持 Tree Shaking 优化。
• Browserify： Browserify 可以让你在浏览器中使用 Node.js 的模块系统，它能够将 CommonJS 模块打包成浏览器可识别的代码。
• Grunt： Grunt 是一款任务自动化工具，可以用来进行代码打包、压缩、合并等操作。
• Gulp： 类似于 Grunt，Gulp 也是一款任务自动化工具，但它采用代码优于配置的方式，让任务定义更加简洁明了。
• Brunch： Brunch 是一款快速、简单的前端打包工具，它可以处理 JavaScript、CSS、HTML 等文件，并且支持插件扩展。
  

本文需要使用到两个工具：browserify、minify（js、css、html 和 img 文件的压缩器）

首先，新建一个文件夹，快速初始化一个 Node 项目，命令如下：

登录可见。

修改 package.json 文件，内容如下：

登录可见。

安装 browserify、minify、fetch-event-source，命令如下：

登录可见。

执行编译命令，如下：

登录可见。

其中：-r 指定需要编译的 npm 包名  -s 在代码中使用的模块名（根据自己习惯，自定义名称）

执行完成后，event.min.js 就是经过压缩后的文件，如下图：



将 event.min.js 内容复制到浏览器控制台进行测试，如下图：



（完）