在前端开发中，我们经常会使用各种第三方库来简化我们的工作，但是这些库往往会包含一些我们不需要的代码，因此我们需要进行打包工作以减小文件大小。npm 包 browserbuild 就是一个可以将模块打包为浏览器可用文件的工具。
安装
在使用 browserbuild 之前，我们需要先安装它。使用 npm 进行安装：
--- ------- -- ------------
使用
配置文件
使用 browserbuild 首先需要创建一个配置文件，文件名可以为 browserbuild.js 或 browserbuild.json，这里以 browserbuild.js 为例。下面是一个简单的例子：
-------------- - - ------ --------------- ------- ---------------- --
这个文件告诉 browserbuild 我们的入口文件是 src/index.js，输出文件为 dist/bundle.js。我们还可以指定一些其他的选项，比如是否进行压缩，是否使用 source map 等。
打包
有了配置文件后，我们就可以运行 browserbuild 进行打包了：
------------
如果你在配置文件中指定了文件名，也可以在命令行中指定：
------------ ---------------
如果一切正常，打包后的文件就会被保存在指定的输出目录中。现在我们可以在 HTML 文件中引入这个文件并使用其中的模块了。
示例
为了更好地理解 browserbuild 的用法，下面我们来写一个简单的示例。我们的项目目录结构如下：
----------- --- ----- --- ------------- --- ---- - --- -------- - --- ---------- - --- ---------- --- ---------- --- --------------- --- ------------
其中，src/index.js 文件内容为：
------ - - - ---- --------------- ------ ----- ----- - -- -- - ------------------ -------- --
src/moduleA.js 文件内容为：
------ ----- - - --------
src/moduleB.js 文件内容为：
------ ----- - - ----
browserbuild.js 文件内容为：
-------------- - - ------ --------------- ------- ----------------- --------- ------------ -------- -------------------------- ----------- ----------- --
这个配置文件告诉 browserbuild 入口文件是 src/index.js，输出文件为 dist/bundle.js，并指定了一个外部依赖 moduleB。我们还使用了一个插件 transform-modules-umd 将模块格式转换为 UMD 格式，并指定了一个模块名 myProject。
我们还需要安装一下 browserbuild-transform-modules-umd，这是一个用于将模块格式转换为 UMD 格式的插件，运行以下命令进行安装：
--- ------- ---------- ----------------------------------
接下来，我们运行 browserbuild：
------------
在浏览器中打开 index.html，控制台输出应为：
----- ------
这里我们就成功地将模块打包为浏览器可用的文件并在浏览器中使用了。如果需要查看完整的示例代码，可以前往我的 GitHub 仓库 查看。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb7deb5cbfe1ea06117de