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; } };

然后尝试使用inc.js中定义的对象的script.js：

obj.editable()

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

Answer 2

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

这个东西是不必要的

应该是：

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

（即“＆gt;＆gt;”而不仅仅是“＆gt;”。）以下内容：

rm ../allplugins.js

或具有相同效果的东西，否则每次构建时都会使文件变大。

结束不必要的部分

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

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

Answer 3

由于依赖于其他文件，合并的文件的顺序不正确。与先前正在运作的订单合并。

Answer 4

我注意到你用django标记了这个问题。您可能对django-mediasync感兴趣，它会自动为您处理js文件连接（请参阅http://pypi.python.org/pypi/django-mediasync/2.0.0#joined-files）：

加入的文件在。中指定   使用JOINED的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标记   组成连接的文件   文件：

<link rel="stylesheet" href="/media/styles/reset.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="/media/styles/text.css" type="text/css" media="screen, projection" />

远程提供时，一个HTML标记   将使用的名称呈现   加入文件：

<link rel="stylesheet" href="http://bucket.s3.amazonaws.com/styles/joined.css" type="text/css" media="screen, projection" />

这是为了通过像Amazon S3这样的东西使用静态内容网站，但它也可以用来从本地服务器提供静态媒体，同时自动处理文件连接。

怎么把我的所有jquery插件放到一个文件中都行不通？

4 个答案: