将javascript模块集成到一个文件中进行部署的方法？答案

【问题标题】：Ways to integrate javascript modules into one file for deployment?将javascript模块集成到一个文件中进行部署的方法？
【发布时间】：2011-12-28 03:03:52
【问题描述】：

在开发过程中，我使用 JS 模块来更好地组织我的代码。例如，我有module1.js、module2.js，这两个模块都包含在main.js 和LABjs中

$LAB
.script("module1.js").wait()
.script("module2.js").wait();

不过，我也使用 Google Closure Compiler 进行代码优化，它需要根据 documentation 集成的 javascript 文件。

解决此问题的最简单方法是将函数与调用这些函数的程序部分一起编译。

所以我想将所有模块集成到一个 js 文件中，然后可以使用 Google Closure Compiler 进行编译。 LabJS 在客户端运行，不会在服务器端完成任务。那么有什么工具可以完成这项工作吗？或者是否有其他库支持服务器端模块集成？

【问题讨论】：

标签： javascript module integration loading code-organization

【解决方案1】：

理论上，您可以使用cat 之类的简单实用程序将文件连接在一起。 *.js 文件只是 Javascript 的片段，并且（假设它们都没有语法错误）它们可以像 *.txt 文件一样拼接在一起。您将在每次部署时执行此操作，因此输入文件可以保持分离，并且针对生成的工件运行 Closurebuilder。例如

compile-js:
  // Concatenate the input files
  cat js/main.js js/module1.js js/module2.js > generated/intermediate.js
  // Compile the optimised output
  closurebuilder.py \
    --root=closure-library/ \
    --root=generated/ \
    --namespace="myproject.start"

另外，您是否考虑过第二种解决方案？为此，您需要“导出”被 Closure 标记为死代码的符号，这就像创建一个具有相同名称的全局变量一样简单：

window['LAB'] = $LAB;

最佳方法取决于您需要包含多少个函数，以及是否需要在编译后保持 Javascript 分离（一些复杂的库在集成到第三方代码时效果不佳）。

【讨论】：

我也想过这个。但是由于有很多页面使用了不同的模块，并且功能肯定会随着开发而更新，更改和删除。因此，在闭包中导出函数对于维护来说是痛苦的。手动连接的方式对我来说并不干燥。
您当然不会手动连接。作为部署脚本的一部分：“cat js/main.js js/module1.js js/module2.js >compiled.js”，然后您只需针对生成的“compiled.js”文件运行闭包构建器。
两步（连接->编译）程序是一种选择。我还发现 RequireJS 附带了一个优化的工具，可以在一个命令中执行这两个步骤。如果您要在不同页面上加载不同的模块，则更好的解决方案。值得一试。

【解决方案2】：

我发现RequireJS 提供了一个优化工具，可以

将相关脚本组合成构建层，并通过 UglifyJS（默认）或 Closure Compiler（使用 Java 时的一个选项）将它们缩小。

在文档中，对于具有以下 main.js 的页面，该页面导入 one.js、two.js 和 three.js：

require(["one", "two", "three"], function (one, two, three) { });

这个优化工具可以将它们压缩成一个集成文件

node ../../r.js -o name=main out=main-built.js baseUrl=.

【讨论】：