rails 4 - 始终包含所有 javascript答案

【问题标题】：rails 4 - all javascripts being included at all timesrails 4 - 始终包含所有 javascript
【发布时间】：2014-04-17 15:57:50
【问题描述】：

我理解“为什么所有 js / css 文件都包含在 rails 资产管道中”的“为什么”部分，正如 here 解释的那样。

但是，这并不总是可取的，不是吗？例如，我有一个非标准布局，仅用于显示需要 Google 地图的项目。我不希望所有页面上都包含所有外部 gmap 库——这不是必需的，而且只是浪费——但如果我不在每个页面上都包含它们，那么在 map.js.coffee 文件中对 google api 的调用将抛出错误。

有没有办法强制map.js.coffee 只显示在maps 视图上？

【问题讨论】：

+1 有类似的问题。我已经用 JS 修复了它，检查父元素是否存在 - 如果存在，我运行谷歌地图的脚本。但我不确定这是否是正确的方法。
“没必要，只是浪费”，不，不浪费。重点在于，您拥有一个 可缓存 JavaScript 包，无论您在网站上查看了多少页面，都只需要下载一次。

标签： javascript ruby-on-rails asset-pipeline

【解决方案1】：

有一个解决方案，javascript_include_tag：

# assets/javascripts/
#          user.js.coffee
#          form.js.coffee
#          map.js.coffee

# views/users/location.html.haml
= javascript_include_tag 'map'

但是在assets/application.js 中定义//= require_tree . 确实包含所有JS 文件，对吗？

所以这样做会包含两次文件，对吧？

更新：按照这个 RailsCast (http://railscasts.com/episodes/279-understanding-the-asset-pipeline) 我们也许可以创建一个公共文件夹，包含所有“共享”的 js 文件，并要求它：//= require_tree ./public

【讨论】：

@MrYoshiji——我认为这是正确的方法。我认为您想在assets/javascripts 或css 目录中创建几个目录，可能一个用于map，一个用于everything，然后在maps.js 文件中使用//= require_tree map 和//=require_tree everything在另一个。您还需要更改 layouts/map.html.erb 才能使用 <%= javascript_include_tag "maps", "data-turbolinks-track" => true %>
你能试试看，告诉我进展如何@user101289？我今天无法测试它，我的工作任务太多，我无法尝试此选项...

【解决方案2】：

要结合其他答案的建议和网络上其他来源的建议，对于这种情况的最佳答案似乎是执行以下操作：

在assets/javascripts 和assets/stylesheets 目录以及maps.js 和maps.css 文件中创建子目录。在我上面的例子中，你会有

app/
    assets/
        javascripts/
            application.js
            maps.js 
            maps/
            site/
        stylesheets/
            application.css
            maps.css
            maps/
            site/

在这些目录中创建任何需要的特定于页面的 javascript/样式表。

maps.js 文件如下所示：

//= require_tree ./maps

application.js 相同，但包括“主要”站点资源以及任何特定于站点的项目：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree ./site

创建一个名为 views/layouts/maps.html.erb 的地图布局文件，并在布局文件中使用 javascript_include_tag 更改解析的 js / css 文件包含：

视图/布局/maps.html.erb：

<%= stylesheet_link_tag    "maps", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "maps", "data-turbolinks-track" => true %>

视图/布局/application.html.erb：

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

确保MapsController 指定地图布局！

class MapsController < ApplicationController
    layout "maps"

【讨论】：

【解决方案3】：

注意 application.html.sim 中的这一行：

= javascript_include_tag "application"

您想在不同的布局 map.html.slim 中包含一组不同的 javascript，然后创建另一个 javascript 文件，例如 map.js.coffee，在此文件中您只包含您需要的文件。现在布局文件需要用到这个

= javascript_include_tag "map"

【讨论】：