Rails 资产在 Heroku 上编译 application.js 文件答案

【问题标题】：Rails assets compile application.js file on HerokuRails 资产在 Heroku 上编译 application.js 文件
【发布时间】：2016-05-20 00:04:44
【问题描述】：

我有几个供应商js文件，我把它们放在body标签底部的application.html.erb中；

  <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta charset="utf-8" />
        <title><%= full_title(yield(:title)) %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <meta content="" name="description" />
        <meta content="" name="author" />
        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
        <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        
      
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>    
    
    
    
    
    
        <%= csrf_meta_tags %>
        
      </head>
      
      <% if (controller.controller_name == "main") %>
        <body class="fixed-header no-header">
   ...
        
      <%= javascript_include_tag 'pace/pace.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'modernizr.custom', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-ui/jquery-ui.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'boostrapv3/js/bootstrap.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery/jquery-easy', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-unveil/jquery.unveil.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-bez/jquery.bez.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-ios-list/jquery.ioslist.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-actual/jquery.actual.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'jquery-scrollbar/jquery.scrollbar.min', 'data-turbolinks-track' => true %>    
      <%= javascript_include_tag 'bootstrap-select2/select2.min', 'data-turbolinks-track' => true %>    
        
...       
      </body>
    </html>

然后我声明它们以便 Rails 能够编译 (config/initializers/assets.rb)

Rails.application.config.assets.precompile += %w( pace/pace.min.js modernizr.custom.js jquery-ui/jquery-ui.min.js boostrapv3/js/bootstrap.min.js jquery/jquery-easy.js jquery-unveil/jquery.unveil.min.js jquery-bez/jquery.bez.min.js jquery-ios-list/jquery.ioslist.min.js jquery-actual/jquery.actual.min.js jquery-scrollbar/jquery.scrollbar.min.js bootstrap-select2/select2.min.js switchery/js/switchery.min.js ...)

然后我注册了heroku并创建了一个应用程序，然后我输入了；

1. bundle exec rake assets:precompile RAILS_ENV=production
2. git add .
3. git commit -m "smth"
4. git push heroku master

应用程序工作正常，但问题出在网络选项卡中。我有 application.js 文件，但我有所有供应商的 js 文件。不应该是rails将它们编译成1个文件吗？

编辑： 我真的无法弄清楚我应该如何将供应商 js 文件包含到 rails 应用程序。由于大多数 js 文件在 dom 加载后工作，我希望它们在 body 标记的末尾加载。

我删除了应用程序并再次推送到 heroku。我什么都没改变。现在 js 文件可以工作了，但奇怪的是它似乎没有加载。

我不需要 application.js 文件中的任何供应商文件。

编辑 2

我非常感谢您的回答并试图理解另一件事。

假设我有一个名为 main.rb 的模型，所以我有主文件夹和 home.html.erb 文件。 Rails 创建 main.coffee（我将其更改为 main.js.coffee）。所以如果我把所有相关的js代码放到这个文件（main.js.coffee）中，每当调用home.html.erb时，这个js代码会在页面加载后自动调用，是这样的吗？如果是这样，我将像这样组织页面特定的js代码。谢谢

【问题讨论】：

标签： ruby-on-rails heroku assets precompile

【解决方案1】：

您是直接从页面以及从串联的预编译文件加载它们，所以您看到的是正在加载的串联文件，然后从您的应用程序中的单独 js 包含标记再次重新加载库.html.erb 文件！您需要做的是在您的 app/assets/javascripts/application.js 文件中要求它们，以便它们被加载一次。

例如在你的 app/assets/js/application.js 文件中应该是：

//= require pace/pace.min
//= require bootstrap-select2/select2.min

对所有 js 文件执行此操作，然后通过调用 page:change 事件确保是否有任何 js 文件无法正常工作以解决 turbolinks，如下所述：

Rails 4: how to use $(document).ready() with turbo-links

编辑： 在 Head 标记中加载 js 库通常很好，因为它们通常都包含在 $(document).ready 调用中，因此无需像这样强制它们进入页面末尾你会为 php 和其他平台。处理这个问题的 Rails 方式是按照 application.js 中的说明要求它们，然后运行 bundle exec rake assets:precompile RAILS_ENV=production 。然后再做一个git add and commit 然后推送到heroku！

现在，为了做你想做的事情并将 js 保留在特定页面的底部，你必须意识到你的 application.html.erb 会为每个页面请求调用，因此你实际上是将这个脚本加载到每个页面中，就像你的应用程序一样。 js资产文件是专为。如果你只想在特定页面和底部调用js，你可以这样做：

在您的 application.html.erb 文件中，您可以在结束 body 标记之前的最底部放置：

<%= yield :javascript %>

然后，在您想要包含一些脚本或库的所有视图页面上，您可以将其放在该视图的最底部：

 <%= content_for :javascript do %>
      <script src="jquery-1.12.2.min.js"></script>
      <script type='text/javascript'>
         all your custom js here....
      </script>
<% end %>

这将根据需要将 js 块生成到底部的 application.html.erb 中的 :javascript。

编辑 3：

您会注意到标准 Rails application.js 文件有一个“require_tree”指令。这基本上会加载所有 js，因此您在 main.js 文件夹中的脚本将触发在应用程序的任何其他部分中引用它们的任何内容。为避免这种情况，您可以按照我的做法删除这些指令并单独调用。这有点高级，但我会引导你完成它，因为很难将它们全部放在散布在互联网上的文档上。这是在 Rails 中加载特定页面资源和处理资源的理想方式。

在您的 application.js 文件中删除 require_tree 并且只删除 //=require 文件，无论它是您的供应商 js 文件夹中的库还是个人脚本。完成后，您需要按如下方式更改 application.html.erb 文件：

在头标签中，您可以保留“javascript_include_tag 应用程序”调用，因为它会执行您想要的操作并拉取所有应用程序。宽 js 文件。然后在该文件底部的结束正文标记上方放置：

<%= javascript_include_tag params[:controller] if ::Rails.application.assets.find_asset("#{params[:controller]}.js") %>

这将仅调用具有匹配控制器名称的 js 文件，例如您的示例中的“main.js”。然后，我还在这一行下使用了可能在其他视图上的 javascript 代码：

<%= yield :javascript %>

然后在具有页面特定 js 的页面上，我将其放在其各自视图的最底部，并且根本不将其添加到我的 assets/js 文件夹中：

<%= content_for :javascript do %>
  <script type='text/javascript'>
    code here
  </script>
<% end %>

现在你差不多完成了。因为您将通过控制器加载文件，所以您需要将它们添加到 Rails 预编译列表中！因此，例如，您的“main.js”文件，即使它是在生成控制器时自动创建的，也必须与所有其他控制器 js 文件一起添加到此预编译数组中。为此，请打开您的 config/initializers/assets.rb 文件并取消注释以下行并添加所有以控制器命名的 js 文件：

Rails.application.config.assets.precompile += %w ( main.js )

现在重新启动您的服务器，您就完成了！我也对 css 文件执行此操作！

注意：如果你有只在一页中使用的 js 库，你可以在这些控制器相关的 js 文件中执行//= require 语句。 //= require不限于application.js文件！

【讨论】：

感谢您的回答。但是如果我在 application.js 文件中需要它们，那么它们将在 head 标签中被调用。我喜欢它们在正文标签的末尾加载，这可能吗？我的应用程序 js 文件看起来像； //= require jquery //= require jquery_ujs //= require dropzone //= require jquery.cookie //= require toastr //= require itenary/itenaryMap //= require itenary/itenary_view //= require_tree . 所以实际上，我这里不需要所有这些 js 文件。
是的，我会再次更新我的答案。 Rails 资产管道非常强大，但也变得复杂，因为它试图处理很多事情。