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 文件位于结束正文标记之前:

<%= yield :javascript %>

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

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

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