时间戳

首页 > 解决方案 > 使用 Rails 6，您将“特定于页面”的 JavaScript 代码放在哪里？

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

问题描述

我的问题与使用 Rails 3.1 相同，您将“特定于页面”的 JavaScript 代码放在哪里？，仅适用于 Rails 6 而不是 Rails 3.1。

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

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

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

标签： ruby-on-railsruby-on-rails-6webpacker

解决方案

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

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

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

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

    if (document.querySelectorAll(".post-index").length) {
  import("./post/index") // webpack will load this JS async
}
  3. 结合配置 API使用特定于splitChunks页面的“包” 。在这种情况下，您将不使用application.js包，而是为每个要区别对待的页面构建一个包，例如，posts.js等admin.js。使用 splitChunks 插件意味着您的包可以正确共享代码。我强烈建议您谨慎使用这种方法，直到您了解 Webpack 的工作原理或愿意在选择此路径时经历学习 Webpack 的过程。Webpack 通常在每个页面只使用一个入口点的假设下工作得最好，否则，除非您知道自己在做什么，否则您最终可能会跨包重复代码。

推荐阅读