在 Rails 资产管道中组织 javascript

Question

概括地说：在 Rails 管道中组织 JS 的最佳实践是什么？

特别是：我有快速增长的 JS 文件，我可以将它们包含在总体 application.js 清单中并让 Sprockets 丑化。但是，每个单独的 JS 文件都开始变得笨拙，我很想对它们进行组织，这样我就不必挖掘数百行实用函数来了解代码的实质。我认识到目标是某种命名空间/模块化，但我不知道将其与资产管道相结合的最佳实践是什么，尤其是 Sprockets 清单。

我已经考虑过并仔细阅读的内容：

• 是的，我已阅读有关其资产管道的完整 Rails 指南。我知道像require 和require_tree 这样的Sprockets 指令是如何工作的；问题是我想使用类似 ES6 import 命令的相同指令，所以我可以做类似的事情

   // in, say, controller.js
   //= require 'utilities'
   ...
   more code
   ...
  
   // and in application.js, more confidently
   //= require 'controller'
  

  但我觉得不应该如何使用清单，或者至少每次我在utilities 中更改一行时它都会不必要地重新编译资产层。我还考虑过单独要求来自application.js 的每个文件，但这并没有真正提供看起来合适的模块化。

• 像 Paloma、CommonJS 或 RequireJS 这样的 Gem。这些看起来有点矫枉过正，似乎是为了取代管道而不是补充管道。

• “现代”JS，如 ES6、Babel 或 Browserify。 （我承认我还没有真正理解这些项目中的重叠，但我想我明白了它们的目的。）也许最终，因为 JS 似乎正朝着那个方向发展，但也似乎有点矫枉过正。
• 吞咽。与以前一样，过度杀伤和不必要的资产管道重写。
• Rails 5 和 Sprockets 4。我们现在在 Rails 4 上，我知道 Sprockets 4 内置了一些 ES6，但我不打算在 Rails 5 公开后至少一段时间后升级发布。

那我该怎么办？我想我需要硬着头皮选择其中一个，但我就是不知道哪个最有意义。该项目不是特别依赖 JS，但它已经足够了，我想现在而不是以后来组织它。

Answer 1

我发现当我有大量特定于页面的 js 时，最好只为重复多次的 js 保留资产管道。显然，所有外部库都应该继续放在您的 vendor/js 文件夹中。将特定于页面的 js 添加到您的应用程序（因此避免在一个页面中只需要一个库或脚本时在每个页面中加载 js）最类似于 rails 的方法是添加到您的 layouts/application.html 的最底部。 erb 文件就在结束正文标记之前：

<%= yield :javascript %>

然后，鉴于您希望运行一些 javascript 的 sn-ps，您应该在所有 html 标记都已关闭后将其放在它的最底部。确保它不在该视图中的某些 div 或任何内容中，而是在它的最底部。

<%= content_for :javascript do %>
  <script type="text/javascript">
   $(document).on('page:load', function() {
       all your page specific code here..
     });
  </script>
<% end %>

此代码现在将生成到布局视图的底部，仅加载到您需要的特定视图上，而不是与 assets/js 文件夹中的所有其他资产一起连接。我对所有非应用范围的自定义 js 执行此操作，并且非常易于维护/调试。