将JavaScript文件合并成一个文件的最佳方法是什么？

Question

我有编程背景，熟悉具有“类”概念的语言。现在我正在编写JavaScript代码，希望以类似的方式编写代码，使每个面向对象的“类”都成为自己单独的文件。

请参见:

• 参见如何在javascript类中从“私有”方法访问“公共”方法

• 参见http://phrogz.net/JS/classes/OOPinJS.html

在其他语言中，我会在类文件顶部创建导入语句，以确保在类文件中使用的其他自定义类被编译到最终二进制文件中。

当然，JavaScript不是一种编译语言; 然而，我仍然希望能够在自定义类文件顶部包含某种“导入”语句，以便我可以确保导入的JS“类”文件可供用户下载。

如果有第三方工具将我所有分离的类文件合并为一个JS文件，那就太理想了，这样浏览器只需要对单个JS文件进行一次HTTP请求，而不是针对每个单独的JS“class”进行多次调用。有人知道是否存在这样的工具吗，它能够执行以下操作：

1. 允许我选择要包含在单个JS文件中的JS文件
2. 浏览我在步骤1中选择的文件，并找到每个自定义“class”文件顶部的所有“import”语句。这些“import”语句可以简单地在代码中作为特殊格式的注释，由第三方识别为导入语句。
3. 然后，第三方将创建包含步骤1中选定的所有文件和步骤2中找到的所有导入文件的单个JS文件。

一些流行的JavaScript框架似乎正是这样做的。例如，jQueryUI允许您通过允许用户勾选要使用的对象来自定义单个jQueryUI源文件的下载。如果您取消选中需要的某个元素，以便选中您勾选的项目，则该表单会告诉您存在需要纠正的依赖项，然后才能继续下载文件。

• 请查看http://jqueryui.com/download/

那么是否有第三方工具允许开发人员使用某种“导入”语句注释，以确保许多依赖的JS文件（仅开发人员需要的文件）被合并为单个JS文件？

- jaxim

---

假设.js文件中没有错误的构造，那么cat *.js > megafile.js即可。 - Marc B

不完全是你所要求的，但JS并不是一种典型的语言，它的工作方式有些不同...试试Grunt：http://gruntjs.com/ - elclanrs

Answer 1

RequireJS是专门为此目的而构建的。

- Wayne Koorts

---

这难道不会为每个所需的脚本触发一个HTTP请求吗？ - Niet the Dark Absol

只有在需要时才能动态加载模块。 - Wayne Koorts

@WayneKoorts，您如何运行RequireJS以创建一个单独的JS文件，然后我可以将其用于发布在我的HTML页面上？本质上，我正在尝试在发布之前将我的代码编译成一个单独的文件。谢谢！ - jaxim

@jaxim：下面的文档描述得非常好：http://www.svlada.com/blog/2012/07/02/require-js-optimization-part2/#t2 - Wayne Koorts

在进一步研究RequireJS时，我发现了另外两个工具：Juicer和Sprockets。 - jaxim

@WayneKoorts 你认为Juicer和/或Sprockets怎么样？这些工具似乎比RequireJS更有优势，因为你不必专门为实用程序编写代码。Juicer和Sprockets允许您创建一个注释包含语句（即“//depend”或“//= require”）。而RequireJS要求您在代码中使用define()和requirejs()方法。请参见http://roderick.dk/2009/10/04/combining-javascript-files-juicer-vs-sprockets/。 - jaxim

Answer 2

看看Require.js。它可以以模块化的方式导入各种JavaScript文件，并添加所需的依赖关系。最后，您可以使用r.js将它们全部压缩成一个单独的JS文件。

- Reza S

Answer 3

一个简单的批处理文件可以帮你做到这一点：

@for %i in (classes/*.js) type %i >> build.js

如果您的JS源文件都在一个文件夹中，则此方法效果最佳，本示例假定该文件夹名为classes。如果有子文件夹，则会稍微复杂一些，但是可以应用类似的原则。

- Niet the Dark Absol

---

我真的很喜欢这个；它非常简单，但恰好能胜任工作。 - Wayne Koorts

CSS和HTML文件怎么样？你能解释一下那个脚本在做什么吗？ - Alexander Mills

很简单，翻译成中文就是："对于类文件夹中的每个.js文件，将其内容追加到build.js" - 它字面上是把所有文件都连接在一起。在运行之前，你需要删除任何已存在的build.js文件... - Niet the Dark Absol

Answer 4

看看这个类https://www.youtube.com/watch?v=KnQfGXrRoPM 它允许在类中动态导入。同时，它还允许导入文件夹及其子文件夹中的所有类。 而且非常简单，因为它只是一个添加到String的原型函数。 只需添加导入器类，您就可以调用类似于“com.project.Classfile.js”.import()或“com.project.*”.import()的类来获取所有子类。 在https://github.com/jleelove/Utils上进行分支。

- Jamie337nichols

Answer 5

看一下GruntJS，JQuery使用它进行构建。如果你不关心HTTP请求，可以使用前面提到的RequireJS，它也有很好的异步方法来加载文件，在某些情况下可以提高性能。

- monshq