使用 Rails 6，您将“特定于页面”的 JavaScript 代码放在哪里？

Question

我的问题与Using Rails 3.1, where do you put your "page specific" JavaScript code? 相同，只是针对 Rails 6 而不是 Rails 3.1。

假设我有一些 JavaScript 想要用于我的帖子索引页面。我将该文件放在哪里，如何包含它？

在上一个问题中，答案通常使用 Rails 资产管道。但是，对于 Rails 6，我的理解是它使用 webpacker 而不是 JavaScript 文件的资产管道。

注意：我不想总是包含该文件。例如。如果我在作者索引页面上，我不希望包含帖子索引页面的 JavaScript 文件。为什么？想象一下，我在帖子索引页面的 JS 文件中有 $('li').on('click', changeColor);。我可能不希望该代码在作者索引页面上运行，但如果包含该文件，它将运行。您可以通过命名空间来解决这个问题，但我认为不包含不必要的文件会更简洁（并且性能更高）。

Answer 1

关于使用 Webpack 和 Webpacker 的经验，我将按照难度增加的顺序描述一些选项。

1. 忘记页面特定的 JavaScript 并将所有内容放在 application.js 包中。这绝对是最容易理解的方法。对于小型应用程序，这种权衡可能是值得的，因为拥有一个更易于维护的应用程序可能会超过学习如何最好地使用 Webpack 拆分 JS 代码而几乎没有性能提升的额外成本。

2. 使用dynamic imports 延迟加载特定于页面的代码。在这种情况下，您仍会将所有 JavaScript 放在 application.js 依赖关系图中，但并非所有这些代码都会预先加载。 Webpack 在编译你的 JS 时会识别动态的 import() 函数，并将导入的块分割成一个单独的文件，该文件可以使用 JS 框架路由器或简单的触发器在浏览器中按需加载。

   例如，您的代码可能如下所示：

   if (document.querySelectorAll(".post-index").length) {
     import("./post/index") // webpack will load this JS async
   }
   

3. 结合使用页面特定的“包”和the splitChunks configuration API。在这种情况下，不是使用 application.js 包，而是为每个要区别对待的页面构建一个包，例如，posts.js、admin.js 等。使用 splitChunks 插件意味着您的包可以正确共享代码。我强烈建议您谨慎使用这种方法，直到您了解 Webpack 的工作原理或愿意在选择此路径时经历学习 Webpack 的过程。 Webpack 通常在您每页仅使用一个入口点的假设下效果最佳，否则，除非您知道自己在做什么，否则您最终可能会跨包重复代码。

Answer 2

让我们在一个空的 Rails 6 应用程序中浏览这个目录的内容。

▶ tree app/javascript
app/javascript
├── channels
│   ├── consumer.js
│   └── index.js
└── packs
    └── application.js

2 directories, 3 files

packs 目录对我们来说很重要，所以让我们看看它包含什么。

// app/javascript/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

webpack 有一个入口点的概念，入口点是它在开始编译 JavaScript 代码时首先查找的文件。

Webpacker gem 在 app/javascript/packs 下以 application.js 文件的形式创建应用程序包。如果你还记得 assets 管道，这个文件相当于 app/assets/javascripts/application.js 文件

简单示例

如何将 Javascript 添加到 Ruby on Rails（将 Javascript 作为模块添加）：

1. 在 Javascript 路径 app/javascript ex: 'post' 中创建文件夹

2. 将您的 javascript 文件添加到 index.js 等文件夹中

3. 在app/javascript/application.js 中添加postmodule -> require('post')

   require("@rails/ujs").start() 需要（“turbolinks”）.start（） 需要("@rails/activestorage").start() 要求（“渠道”） 要求（“发布”）

让我们在添加 post 模块后在 Rails 6 应用程序中浏览此目录的内容

▶ tree app/javascript
app/javascript
├── channels
│   ├── consumer.js
│   └── index.js
└── packs
|    └── application.js
|ـــ post
     |__ index.js

这种简单的方式使用 webpack 与旧的 rails 样式相同。

Answer 3

这就是我使用 Turbolinks 提供页面特定代码的方式：

# javascript/packs/application.js
import {posts_show              } from '../per_page/posts_show';
import {users_new               } from '../per_page/users_new';
const pages = {posts_show, users_new};
document.addEventListener("turbolinks:load", () => {
    # I am using gon to save the page name, but you can add page name to document body and then const page = document.body.className
    const page = gon.controller_full
    # check if method exist if true execute
    if ('function' === typeof pages[page]){
      new pages[page]
    }
});

正如您所注意到的，我将所有 js 编译到一个文件中，并根据需要执行它们。

这里是 post_show 的一个例子：

# javascript/per_page/posts_show.js
import {default as share_menu_init} from './methods/share_menu_init.js'
export class posts_show {
    constructor() {
        share_menu_init()
        ... # some other code here
    }
}

您可以看到我正在导入share_menu_init 模块。如果我需要在页面之间共享一些方法，我将它们存储在模块中，并且 Webpack 足够聪明，不会创建重复项（如果我将它导入两次，在 posts_show 和其他页面中）它只会组织文件，以便我的 posts_show 有访问此方法。

const share_menu_init = () => {
    ... # some code here
}
export default share_menu_init

不确定它是否是提供特定页面代码的最佳方式，如果您有更好的方法，我想听听。

Answer 4

您应该这样做的方式是创建一个文件夹结构以匹配您的视图：

app/javascript
├── channels
│   ├── consumer.js
│   └── index.js
└── packs
     └── application.js
     └── post
         └── index.js

然后在你想要包含的视图index.js 中：

<%= javascript_pack_tag('post/index') %>

添加之后，在您的application.rb 中添加：

config.assets.precompile += ['listings/index.js']

这样你只在你需要的特定视图中加载它，你可以在制作视图特定的 JS 时继续附加更多资产。

注意事项：

• 一个常见的论点是，您可能会不小心将生产代码推送到预编译列表中缺少资产，因此您应该只加载所有 JS 但这只是懒惰，如果页面缺少资产，您甚至无法加载页面，如果你推送的代码缺少你没有测试任何东西的资产。

参考资料：

1. https://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

Answer 5

你可以使用$.getScript

https://coderwall.com/p/xubjcq/handling-large-javascript-files-with-turbolinks

(function(){
  var requiredScripts = [];

  window.requireOnce = function (path, cb) {
    if ($.inArray(path, requiredScripts) == -1) {
      requiredScripts.push(path)
      $.getScript(path, cb)
    } else {
      cb()
    }
  }
})();

像这样使用它：

requireOnce('wysiwyg.js', function(){
  $('textarea').wysiwyg()
});