Ruby on Rails 4：如何在 Rails Web 应用程序中包含 Javascript 文件？答案

【问题标题】：Ruby on Rails 4: How to include Javascript files in Rails web application?Ruby on Rails 4：如何在 Rails Web 应用程序中包含 Javascript 文件？
【发布时间】：2014-04-13 09:51:18
【问题描述】：

我正在构建一个 Rails 4 Web 应用程序，我想在我的应用程序中包含一些 .js 文件。是否可以直接将 JavaScript 文件添加到我的 Rails ..app/assets/javascripts 文件夹并像这样在 application.js 中添加引用？

//= customejsfile.js

这是正确的方法吗？如果是，我是否可以按照相同的步骤添加 jQuery 和 Bootstrap 库？

感谢任何帮助。

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap ruby-on-rails-4

【解决方案1】：

包含文件的正确方法是：

//= require customejsfile

在您的application.js 文件中。更重要的是，默认情况下你有

//= require_tree .

这需要来自assets/javascript 路径的所有 js 文件，因此您不必自己输入（而且您不应该这样做，否则您的文件会被包含两次）。默认情况下包含 JQuery 库（它来自 jQuery gem）。如果您想要 Bootstrap，那么您可以这样做或使用现有的 gem 之一，例如 bootstrap-generators 或 twitter-bootstrap-rails。

【讨论】：

你不需要精确的js扩展，sprockets假设它们是js。
@MarekLipka 嗨，谢谢 Marek，如果您没有实际的 .js 文件但有指向 CDN 的链接，您知道该怎么做吗？如何将其合并到 Rails 中？跨度>
我可能会将链接放在 html 中，就像您通常在 html 网站中所做的那样。

【解决方案2】：

查看 application.html.erb 文件，您会看到 application.js 是通过以下方式引用的：

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

所以当我遇到这个挑战时，我所做的是：将此脚本添加到我想引用我的自定义 javascript 的文件中，但这次我修改了参数。所以不是“应用程序”，而是我有这个：

<%= javascript_include_tag "customjsFile", "data-turbolinks-track" => true  %>

希望这会有所帮助。

【讨论】：

【解决方案3】：

您必须在 application.js 中显式添加 jquery 和 bootstrap，而您将自动包含需要目录树的自定义文件。如果你看看你的 application.js 应该有一个清单说。这就是你的 application.js 在 bootstrap 和 jquery 中的样子

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
//= require turbolinks
//= require_tree .

无需在此列表中添加您的自定义文件，因为您需要与最后一个指令 (require tree .) 位于 application.js 同一级别（或目录树中的较低级别）的所有文件

【讨论】：

【解决方案4】：

&lt;script src="&lt;%= asset_path 'my_js_file' %&gt;"&gt;&lt;/script&gt;

如果您不想使用javascript_include_tag，也可以正常工作

【讨论】：