为什么将我所有的 jquery 插件放入一个文件中不起作用？

Question

之前，我有这样的情况：

<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/alertbar.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.masonry.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.growfield2.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.placeholder.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.color.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}js/plugins/tipsy/src/javascripts/jquery.tipsy.js"></script>

加载页面时一切正常，并且没有错误。我的朋友告诉我将它们全部合并到 1 个文件中。所以我这样做了：

find somedir/ -name '*.js' -exec cat {} + > ../allplugins.js

现在，当我包含“allplugins.js”时，我遇到了未捕获的类型错误。对象#没有方法“可编辑”

Answer 1

您应该按照导入 JavaScript 插件的顺序连接它们。

您可以通过将它们列在一个文件（例如plugins.list）中来做到这一点，每个文件名一行。然后使用以下方法构建 allplugins.js：

cat plugins.list | while read jsfile; do
  echo
  echo "//===== `basename "$jsfile"` ====="
  cat "$jsfile"
done > ../allplugins.js

例如，如果您有一个文件 inc.js，

obj = { 'editable': function(){ return 42; } };

其中包含 script.js 尝试使用 inc.js 中定义的对象：

obj.editable()

如果颠倒这两个文件的顺序，您可以看到该 obj 正在使用但尚未定义。

Answer 2

由于依赖于其他文件，合并的文件的顺序不正确。以与之前相同的顺序合并。

Answer 3

编辑抱歉 - 关于使用“>>”的内容而不是“>”可能是不必要的，因为重定向发生在“find”命令的级别，所以它应该可以正常工作。对此感到抱歉。

这个东西是不必要的

应该是：（

find somedir/ -name '*.js' -exec cat {} + >> ../allplugins.js

也就是说，“>>”而不仅仅是“>”。）在前面加上：

rm ../allplugins.js

或达到相同效果的东西，否则每次构建时都会使文件更大。

结束不必要的部分

是，文件将根据可能完全任意的排序进行连接，而它们几乎肯定具有需要特定部分排序的相互依赖性。您应该重命名树中的文件，以便简单的串联命令以正确的顺序执行其操作，或者以正确的顺序显式列出文件以进行串联。您拥有的脚本标签的原始序列将是文件排序的一个很好的起点。

另外，找到你的朋友并向他/她扔一个水气球。

Answer 4

我注意到你用 django 标记了这个问题。您可能对 django-mediasync 感兴趣，它自动处理 js 文件串联你（参见http://pypi.python.org/pypi/ django-mediasync/2.0.0#joined-files):

连接的文件在
MEDIASYNC 字典使用 JOINED。这是一个
将单个媒体映射到一个字典
加入文件的别名。

'已加入': {
'styles/joined.css': ['styles/reset.css','styles/text.css'],
'scripts/joined.js': ['scripts/jquery.js','scripts/processing.js'],
},

JOINED 中列出的文件将是
合并并推送到 S3
别名的名称。单独的 CSS
文件也将被推送到 S3。
别名必须以 .css 或 .js 结尾
为了使内容类型成为
适当设置。

可以使用现有的模板标签
参见加盟媒体。简单地
使用连接的别名作为参数：

{% css_print "joined.css" %}

在本地提供时，模板标签
将为每个呈现一个 HTML 标签
组成连接的文件
文件：

<代码>

<代码>

远程服务时，一个 HTML 标签
将用名称呈现
加入文件：

<代码>

这旨在通过 Amazon S3 之类的方式使用静态内容站点，但它也可以用于仅从本地服务器提供静态媒体，同时自动处理文件联系。