将多个JavaScript文件合并成一个JS文件

Question

我在我的网页应用程序中使用jQuery，并且需要将更多的jQuery脚本文件加载到单个页面中。

Google建议将所有的jQuery脚本文件合并为一个文件。

如何做到这一点？

- Chandrasekhar

---

针对命令行解决方案：全局安装 npm install uglify-js -g，然后执行 uglifyjs file1.js file2.js -o output.js -c -m。 - Praveen

Answer 1

在 Linux 上，你可以使用一个简单的 shell 脚本 https://github.com/dfsq/compressJS.sh 来将多个 JavaScript 文件合并成一个文件。它利用了 Closure Compiler 在线服务，因此生成的脚本也被有效压缩了。

$ ./compressJS.sh some-script.js another-sctipt.js onemore.js

- dfsq

---

这个能在Handlebars中工作吗？ - Dan Baker

最好使用类似Grunt、Gulp等任务管理器来自动化处理。使用Grunt我可以将我的less、typescript和handlebars编译到生成的文件夹中，然后将js/css文件也复制到生成的文件夹中，在最后我还会将所有.js文件压缩成一个js文件，所有.css文件压缩成一个css文件。此外，我还有一个观察者来在文件修改时重新运行这个配置，这样我就可以保存文件并刷新浏览器，在1-3秒内应用所有变更。 - Vadorequest

Answer 2

尝试使用Google Closure编译器：

http://code.google.com/closure/compiler/docs/gettingstarted_ui.html

- Tom Gruner

---

Google：Closure 编译器服务已被弃用，将被移除。请考虑在本地运行编译器。 - Martin Ille

Answer 3

只需合并文本文件，然后使用类似YUI Compressor的工具进行压缩。

使用命令cat *.js > main.js轻松地组合文件，然后可以通过java -jar yuicompressor-x.y.z.jar -o main.min.js main.js运行main.js通过YUI压缩器进行压缩。

更新于2014年8月

我现在已经迁移到使用Gulp进行JavaScript串联和压缩，因为借助各种插件和一些最小化配置，您可以设置依赖性、编译Coffeescript等，并压缩JS。

- Prydie

---

已修复 @reformed。 - Prydie

Answer 4

您可以通过以下方式实现：

• a. 手动：将所有JavaScript文件复制到一个文件中，对其进行压缩（可选但建议），并上传到服务器并链接到该文件。
• b. 使用PHP：只需创建所有JS文件的数组并将它们全部包含并输出到一个<script>标签中即可。

- Gary Green

---

不推荐选项B，因为它会导致您的浏览器为所有小的单独.js文件发出许多请求（速度慢），而不是只为一个更大的.js文件发出一个请求（速度更快）。 - Mikepote

@Mikepote，是的...因此我使用了“包含”这个词，即不要使用<script src="....">链接到多个文件，而只需将它们包含在一个脚本元素中。最好使用CDN以及适当的缓存。 - Gary Green

啊，抱歉，我误读了你的回答。 - Mikepote

可以请您举个例子吗？ - Anand Solanki

最好使用 readfile() 来避免解析开销和意外地获取到被解释的内容。 - Chinoto Vokro

Answer 5

通常我会在Makefile中设置它：

# All .js compiled into a single one.
compiled=./path/of/js/main.js

compile:
    @find ./path/of/js -type f -name "*.js" | xargs cat > $(compiled)

然后你运行：

make compile

我希望这能对您有所帮助。

- user339827

Answer 6

我在Linux上使用这个shell脚本：https://github.com/eloone/mergejs。与以上脚本相比，它具有非常简单易用的优点，而且一个大的加分项是你可以在输入文本文件中列出要合并的js文件，而不是在命令行中列出，因此你的列表是可重复使用的，你不必每次想合并文件时都要输入。这非常方便，因为你每次想推向生产环境时都需要重复这一步骤。你还可以在列表中注释掉你不想合并的文件。你最可能输入的命令行是：

$ mergejs js_files_list.txt output.js

如果您还想压缩合并后的文件：

$ mergejs -c js_files_list.txt output.js

这将创建由Google的Closure编译器进行压缩的output-min.js。或者：

$ mergejs -c js_files_list.txt output.js output.minified.js

如果你想为你的压缩文件指定一个特定的名称，命名为output.minified.js，我认为对于简单的网站非常有用。

- eloone

Answer 7

将此脚本复制到记事本中，另存为.vbs文件。 将.js文件拖放到此脚本上。

注： 仅适用于Windows操作系统。

set objArgs = Wscript.Arguments
set objFso = CreateObject("Scripting.FileSystemObject")
content = ""

'Iterate through all the arguments passed
for i = 0 to objArgs.count  
    on error resume next
    'Try and treat the argument like a folder
    Set folder = objFso.GetFolder(objArgs(i))
    'If we get an error, we know it is a file
    if err.number <> 0 then
        'This is not a folder, treat as file
        content = content & ReadFile(objArgs(i))
    else
        'No error? This is a folder, process accordingly
        for each file in folder.Files
            content = content & ReadFile(file.path)
        next
    end if
    on error goto 0
next

'Get system Temp folder path
set tempFolderPath = objFso.GetSpecialFolder(2)
'Generate a random filename to use for a temporary file
strTempFileName = objFso.GetTempName
'Create temporary file in Temp folder
set objTempFile = tempFolderPath.CreateTextFile(strTempFileName)
'Write content from JavaScript files to temporary file
objTempFile.WriteLine(content)
objTempFile.Close

'Open temporary file in Notepad
set objShell = CreateObject("WScript.Shell")
objShell.Run("Notepad.exe " & tempFolderPath & "\" & strTempFileName)


function ReadFile(strFilePath)
    'If file path ends with ".js", we know it is JavaScript file
    if Right(strFilePath, 3) = ".js" then       
        set objFile = objFso.OpenTextFile(strFilePath, 1, false)
        'Read entire contents of a JavaScript file and returns it as a string
        ReadFile = objFile.ReadAll & vbNewLine
        objFile.Close
    else
        'Return empty string
        ReadFile = ""
    end if  
end function

- SasHok.Tk

Answer 8

脚本分组是适得其反的，你应该使用类似于http://yepnopejs.com/或http://headjs.com这样的工具并行加载它们。

- Capsule

---

合并JavaScript文件是有合理的理由的。其中一个原因是，请求20个2kb的文件可能比请求一个40kb的文件要花费更长的时间。 - Joel B

每千年发生多少次？ - Capsule

比你想象的更频繁。甚至看一下stackoverflow的源代码也是如此：“……不推荐选项B，因为它会导致浏览器为了获取所有小的.js文件（较慢）而发出大量请求，而不是只有一个请求获取较大的.js文件（更快）。” - Joel B

我仍然认为这是一个边缘情况。大多数情况下，您会有一个jquery文件，一些jquery插件，然后是您的主js文件。总共5到6个文件，它们都是合理大小，可以证明并行加载的必要性。当然，您必须检查并行加载的内容。最好的解决方案是两种方法的混合。 - Capsule

很抱歉告诉你，但互联网正在迅速从jQuery转向MVC JavaScript，加载一个文件比触发多个HTTP请求要快。 - Foxhoundn

@Foxhoundn，互联网也正在迅速转向HTTP2，所以这个问题将不再重要。无论如何，jQuery只是一个例子，你可能会在MVC JS中面临完全相同的问题。 - Capsule

Answer 9

你可以像orangutancloud建议的那样使用Closure编译器。值得注意的是，你实际上不需要编译/缩小JavaScript，只需将JavaScript文本文件简单地连接成一个文本文件即可。按照它们通常在页面中包含的顺序加入它们即可。

- Jim Blackler

---

是的，说得好。如果您或插件作者不遵循良好的语法，或者尝试进行调试，则闭包编译器可能会很棘手。但是，如果您以最基本的模式使用它，它可以很有帮助。我个人非常喜欢Dojo，并在Dojo项目中使用他们的构建系统，这确实有助于将所有内容保持在一个文件中。但它只适用于部署，而不适用于开发。 - Tom Gruner

Answer 10

你可以使用KjsCompiler：https://github.com/knyga/kjscompiler。它拥有很酷的依赖管理。

- Oleksandr Knyga

---

我已经找了几个小时类似的工具，但最终这个工具完全按照我的想象工作。简单而直接。 - Gergely Kovács