Rails 4 - 破坏我的 Bootstrap 下拉菜单的预编译资产答案

【问题标题】：Rails 4 - Precompiled assets breaking my Bootstrap dropdown-menuRails 4 - 破坏我的 Bootstrap 下拉菜单的预编译资产
【发布时间】：2014-10-31 15:01:30
【问题描述】：

我正在使用 Bootstrap 构建一个 Rails 应用程序以进行移动扩展。当我部署到 Heroku 时，我所有的资产都不见了。我认为这已在 Rails 4 中修复，但无论如何。我使用“rails_12factor”预编译了所有资产。现在我所有的图像和样式都渲染得很好，但是下拉菜单莫名其妙地什么也没做。

也许我在编译时做错了什么？我去了；

$ rake assets:precompile
$ git add .
$ git commit -a -m "Asset Fix"
$ git push heroku master

...我的菜单坏了。

这就是它现在的样子； http://rocky-crag-1181.herokuapp.com/

调整浏览器大小以重新创建中断。

Repository at; https://github.com/SoundBank/soundbank02

【问题讨论】：

Uncaught ReferenceError: $ is not defined bootswatch.js:1 -----我在控制台上看到了这个错误。意味着该页面上的所有 js 都在主 jQuery 文件之前加载。将 jQuery.js 放在顶部，然后再次清理资产，然后预编译资产。推送代码。此错误导致下拉菜单不起作用。
或者您可能在同一页面上加载了两次 jQuery。所以删除额外的。
什么是 bootstrap.js？
您好，感谢您的 cmets，SSR。我不知道如何让 jquery 先加载。抱歉，我是 Rails 的新手。我检查了对 jquery 的其他调用的视图，但看不到任何视图。
我确实删除了多余的引导表，因为没有它，我的开发服务器中的菜单也能正常工作。 Bootswatch 是一个自定义插件，用于从基本模板遗留下来的引导程序。

标签： css ruby-on-rails twitter-bootstrap ruby-on-rails-4 heroku

【解决方案1】：

我的 app/assets 文件夹中的 jquery 和 bootstrap 冗余版本在生产预编译期间发生了冲突。我刚刚从目录中删除了它们，更正了我的 application.js，然后运行了另一个 rake assets:precompile

这使问题变得混乱。剔除旧脚本后，我可以命令 jquery 先加载（感谢 SSR）。

现在响应式菜单和背景轮播都可以很好地使用 jquery。

顺便说一句，基本模板是 Bootswatch 的 United，而我删除的捆绑脚本是；

bootstrap.js
jquery-1.10.2.min.js

从现在开始，我将更加仔细地注意下载模板中的冲突脚本。

【讨论】：

【解决方案2】：

您的应用程序使用两个 jQuery 版本运行。 rails 提供了最新的 jQuery 版本，所以不需要包含额外的版本。如果您需要这样做，请替换

//= 需要 jquery

你的 jQuery 文件的这一行

//= 需要 jquery-1.10.2.min.js

但记住你的 jQuery 文件应该在

应用程序/资产/javascript/

你的 application.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

这一行应该是文件的结尾，但在正文关闭标记之前。

现在在终端触发这个命令

cd /sites/<app_name>
rm public/assets -R
rake assets:precompile

给你：D

【讨论】：

感谢所有优秀的 cmets。确实非常翔实。我添加了您的最终 turbolinks 跟踪器，然后我使版本需要更改 jquery 并将副本放在供应商目录中以防万一。还是没有骰子。