将多个 JavaScript 文件合并为一个 JS 文件 [关闭]

Posted

技术标签:

【中文标题】将多个 JavaScript 文件合并为一个 JS 文件 [关闭]【英文标题】：Combine multiple JavaScript files into one JS file [closed] 【发布时间】：2011-07-27 14:05:52 【问题描述】：

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

Google 建议我将所有 jquery 脚本文件合并到一个文件中。

我该怎么做？

【问题讨论】：

对于命令行解决方案：全局安装npm install uglify-js -g，然后执行uglifyjs file1.js file2.js -o output.js -c -m 【参考方案1】：

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

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

【讨论】：

这个可以和车把一起使用吗？ 最好使用任务管理器，如 Grunt、Gulp 和其他类似的东西会自动执行此操作。使用 Grunt，我将我的 less、typescript、handlebars 编译到生成的文件夹中，然后我将 js/css 文件也复制到生成的文件夹中，最后我还将所有 .js 文件压缩到一个 js 文件中，并压缩到一个 css 文件中所有 .css 文件。我有一个观察者在文件更改时重新运行该配置，以便我可以保存文件并刷新浏览器，并且所有更改都在 1-3 秒内应用。【参考方案2】：

试试 google 闭包编译器：

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

【讨论】：

【参考方案3】：

只需合并文本文件，然后使用 YUI Compressor 之类的东西。

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

2014 年 8 月更新

我现在已经迁移到使用 Gulp 进行 javascript 连接和压缩，就像使用各种插件和一些最小配置一样，您可以执行设置依赖项、编译咖啡脚本等以及压缩 JS 等操作。

【讨论】：

固定@reformed。【参考方案4】：

你可以通过

一个。手动：将所有 Javascript 文件复制到一个文件中，在其上运行压缩器（可选但推荐）并上传到服务器并链接到该文件。 乙。使用 PHP： 只需创建一个包含所有 JS 文件和 include 的数组，然后输出到 <script> 标记中

【讨论】：

不推荐使用选项 B，因为它会导致您的浏览器对所有小的单个 .js 文件（慢）发出许多请求，而不是只对较大的 .js 文件发出一个请求（更快）。跨度> @Mikepote，是的...因此我使用了include 这个词，即不要将 对不起，我看错了你的回答。 你能在这里举个例子吗？ 最好使用 readfile() 来避免解析开销和意外得到解释。【参考方案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

希望对你有帮助。

【讨论】：

【参考方案6】：

我在 Linux https://github.com/eloone/mergejs 上使用这个 shell 脚本。

与上面的脚本相比，它具有使用非常简单的优点，还有一个很大的优点是您可以在输入文本文件中而不是在命令行中列出要合并的js文件，因此您的列表是可重复使用的，您不必在每次要合并文件时都键入它。这非常方便，因为您每次想要投入生产时都将重复此步骤。您还可以在列表中评论您不想合并的文件。您最有可能输入的命令行是：

$ mergejs js_files_list.txt output.js

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

$ mergejs -c js_files_list.txt output.js

这将创建由 Google 的闭包编译器缩小的 output-min.js。或者：

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

如果您想要一个名为 output.minified.js 的缩小文件的特定名称

我发现它对一个简单的网站很有帮助。

【讨论】：

【参考方案7】：

将此脚本复制到记事本并保存为 .vbs 文件。 在此脚本上拖放 .js 文件。

ps。 这仅适用于 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

【讨论】：

【参考方案8】：

脚本分组会适得其反，您应该使用http://yepnopejs.com/ 或http://headjs.com 之类的方式并行加载它们

【讨论】：

合并javascript文件是有正当理由的。一方面，请求 20 个 2kb 的文件很可能比请求一个 40 kb 的文件花费更长的时间。 每千年会发生多少次？ 比你想象的更频繁。甚至看看 *** 的源代码：“...不推荐使用选项 B，因为它会导致您的浏览器对所有小的单个 .js 文件（慢）发出许多请求，而不仅仅是对更大的 .js 文件的一个请求文件（更快）。” @Capsule 我不想告诉你，但是互联网正在迅速从 jQuery 转向 MVC JavaScript，加载一个文件总是比触发多个 HTTP 请求更快。 @Foxhoundn 互联网也在迅速转向 HTTP2，所以它不再重要了。无论如何，jQuery 只是一个例子，你可能会遇到与 MVC JS 完全相同的问题【参考方案9】：

您可以按照 orangutancloud 的建议使用 Closure-compiler。值得指出的是，您实际上并不需要 编译/缩小 JavaScript，应该可以简单地将 JavaScript 文本文件连接成单个文本文件。只需按照页面中通常包含的顺序加入它们即可。

【讨论】：

是的，好点。如果您或插件作者没有跟上良好的语法，或者您正在尝试调试，则闭包编译器可能会很棘手。但是，如果您在最基本的模式下使用它，它可能会有所帮助。我个人非常喜欢 Dojo，并且在 dojo 项目中使用他们的构建系统，这确实有助于将所有内容保存在一个文件中。但它只对部署有用，对开发没有用。【参考方案10】：

如果您正在运行 php，我建议您使用 Minify，因为它确实会为 CSS 和 JS 即时组合和缩小。配置完成后，就可以正常工作，它会处理一切。

【讨论】：

【参考方案11】：

您可以使用 KjsCompiler：https://github.com/knyga/kjscompiler 酷炫的依赖管理

【讨论】：

我一直在寻找这样的工具几个小时，但最终这完全符合我的想象。简单明了。【参考方案12】：

您可以使用我制作的脚本。你需要 JRuby 来运行它。 https://bitbucket.org/ardee_aram/jscombiner (JSCombiner)。

它的不同之处在于它会监视 javascript 中的文件更改，并将其自动组合到您选择的脚本中。因此，无需在每次测试时手动“构建”您的 javascript。希望对你有帮助，我正在使用这个。

【讨论】：

【参考方案13】：

这可能有点费力，但您可以从 codeplex 下载我的开源 wiki 项目：

http://shuttlewiki.codeplex.com

它包含一个使用 http://yuicompressor.codeplex.com/ 项目的 CompressJavascript 项目（和 CompressCSS）。

代码应该是不言自明的，但它使合并和压缩文件更简单 --- 无论如何对我来说 :)

ShuttleWiki 项目展示了如何在构建后事件中使用它。

【讨论】：

以上是关于将多个 JavaScript 文件合并为一个 JS 文件 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

我们可以将 CSS 和 JS 文件合并为一个文件吗？

将所有 js 文件合并到一个文件中是不是一定更快？

如何将多个外部 Javascript 脚本合并为一个？

如何使用node.js将多个json的对象合并到一个json文件中

js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？

js如何导出exel文件？