在前端开发中，我们经常需要打包将多个模块整合为一个文件，方便页面调用和管理。Npm里有许多这样的包，其中一个比较受欢迎的包是 global-modulize。它可以将多个文件打包为一个文件并且注入全局变量。这篇文章就来介绍其使用方法。
安装 global-modulize
使用 npm 全局安装 global-modulize：
npm install global-modulize -g
使用 global-modulize
使用 global-modulize 命令：
global-modulize input.js output.js -n moduleName
其中：
- input.js 是你需要打包的文件
- output.js 是打包后的文件
- -n 后面的 moduleName 是输出到全局空间中的变量名
例如，假设我们要将三个文件打包到一个文件中，变量为 Test：
-- -------------------- ---- ------- -- ------ ------ -------- ------ - -------------------- - -- ------ ------ -------- ----- - ------------------- - -- ------ ------ -------- ----- - ------------------- -
我们可以用以下命令将三个文件打包到一个文件 output.js 中，并注入全局变量 Test：
global-modulize app.js foo.js bar.js -n Test -o output.js
这样，我们在 HTML 页面中只需要引用 output.js 即可调用 Test.test()、Test.foo()、Test.bar() 函数。
示例代码
下面我们来看一段示例代码。
我们新建 main.js、module1.js 和 module2.js 三个文件：
-- -------------------- ---- -------
-- ----------
--- ------- - -
----- ----------
------ -----------
-----------------------
-
--
-------------- - --------
-- ----------
-------- ----------
--- ------- - -
----- ----------
------ -----------
-----------------------
-
-
------ --------
-
-------------- - --------
-- -------
--- ------- - ---------------------
--- ------- - -----------------------
----------------
----------------创建好之后，我们使用以下命令打包到一个文件：
global-modulize main.js -o output.js -n test
- -o：输出文件名；
- -n：你需要在全局命名空间里使用的名字。
<!-- index.html --> <script src="output.js"></script> <script> console.log(test.module1.name); test.module1.print(); console.log(test.module2.name); test.module2.print(); </script>
在控制台里，我们执行 index.html 页面，可以看到输出：
module1 module2
这说明我们已经成功注入全局命名空间。现在，我们就可以把 output.js 放到一个公共的 CDN 服务上，然后在所有的页面都使用这个 CDN 引用文件。这就能大大减少每个前端页面的加载时间，减轻服务器负担。
总结
global-modulize 可以将多个文件打包为一个文件，自动注入全局变量。它对前端性能优化非常有帮助。
如果你有多个模块需要打包，建议使用 global-modulize。因为它被设计为专门满足前端工程师的需求，使用也非常便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e71255dee6beeee7491