什么是 dist-js
dist-js 是一个用于将 JavaScript 模块打包成浏览器可用的独立 JavaScript 文件的工具。它可以将一个或多个模块导出为一个全局变量，方便浏览器中直接引入使用。
使用 dist-js
首先，你需要安装 dist-js：
npm install -g dist-js
接下来，进入你的 JavaScript 模块目录，执行下面的命令来生成一个 dist 文件：
dist-js input.js -o output
其中，input.js 是你要打包的 JavaScript 模块文件，output 是输出的文件名，可以自己命名。
成功生成 dist 文件后，你可以在浏览器中直接引入使用，例如：
<script src="output.js"></script>
设计思路
dist-js 的设计思路是将多个 JavaScript 模块打包成一个浏览器可用的 JavaScript 文件，并将它们作为全局变量导出。导出方式可通过配置文件进行自定义。
dist-js 打包过程中使用了 UglifyJS、ESLint 以及 Babel 这些强大的工具，帮助我们进行代码压缩和语法分析。同时，它还支持插件扩展机制，可以针对不同的使用场景进行适当的调整，满足个性化的需求。
案例演示
假设我们有两个模块，一个是 util.js，另一个是 main.js，它们的内容如下：
-- -------------------- ---- -------
-- -------
----- ---- - -
------ -- -
------ - - --
--
-------- -- -
------ - - --
--
--
------ ------- -----
-- -------
------ ---- ---- ------------
----- - - ----------- ---
----- - - ------------- ---
-------------- ---我们可以执行以下命令来创建一个输出文件 dist/main.js：
dist-js main.js -o dist/main.js
然后在 HTML 中引入该文件即可使用：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ------------
-------
------
------- ----------------------------
-------
-------以上代码可以在浏览器中正常运行，输出内容为：
3 1
总结
dist-js 是一个优秀的 JavaScript 打包工具，它可以将多个模块打包成一个浏览器可用的 JavaScript 文件，并导出为全局变量。它的设计思路灵活多样，且支持插件扩展机制，可以适应不同的使用场景。使用 dist-js 可以帮助前端开发者更加高效地开发和维护自己的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bf181e8991b448eba94