javascript - 在 Rails Assets 管道中组织 javascript

Question

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

特别是:我有快速增长的 JS 文件，我可以将这些文件包含在总体 application.js list 中并让 Sprockets 变丑。然而，每个单独的 JS 文件开始变得笨拙，我很乐意组织它们，这样我就不必深入研究数百行实用函数来了解代码的实质。我认识到目标是某种命名空间/模块化，但我不知道将其与 Assets 管道(尤其是 Sprockets list )相结合的最佳实践是什么。

我已经考虑过并仔细阅读的事情:

• 是的，我已经阅读了关于其 Assets 管道的整个 Rails 指南。我知道像 require 和 require_tree 这样的 Sprockets 指令是如何工作的；问题是我想使用那些与 ES6 import 命令等效的指令，这样我就可以做类似的事情

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

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

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

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

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

Answer 1

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

<%= yield :javascript %>

然后在您希望运行一些 javascript 片段的 View 中，您应该在关闭所有 html 标签后将其放在它的最底部。确保它不在该 View 中的某些 div 或任何内容中，而是在它的最底部。

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

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