使用 Rails 6，你把“页面特定"的 JavaScript 代码放在哪里? [英] Using Rails 6, where do you put your “page specific” JavaScript code?

问题描述

我在这里的问题与 使用 Rails 3.1，你把你的页面特定"放在哪里?JavaScript 代码?，仅适用于 Rails 6 而不是 Rails 3.1.

My question here is the same as Using Rails 3.1, where do you put your "page specific" JavaScript code?, just for Rails 6 instead of Rails 3.1.

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

Suppose I have some JavaScript that I want to use for my posts index page. Where do I put that file, and how do I include it?

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

In the previous question the answers usually utilize the Rails Asset Pipeline. However, with Rails 6, my understanding is that it uses webpacker instead of the Asset Pipeline for JavaScript files.

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

Note: I don't want the file to always be included. Eg. if I am on the authors index page, I don't want the JavaScript file for the posts index page to be included. Why? Imagine I have $('li').on('click', changeColor); in the JS file for the posts index page. I probably don't want that code to run on the authors index page, but it will if the file is included. You could get around this problem by namespacing, but I think it would be cleaner (and more performant) to just not include unnecessary files.

推荐答案

我将按照 Webpack 和 Webpacker 体验的难度级别来描述一些选项.

I'll describe a few options in order of increasing level of difficulty with regards to experience with Webpack and Webpacker.

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

1. Forget page-specific JavaScript and put everything in the application.js bundle. This will most definitely be the easiest approach to understand. For a small application, the tradeoff may well be worth it as having an application that's easier to maintain may outweigh added cost of learning how to best to split up your JS code with Webpack with little performance gain.

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

Use dynamic imports to lazy load your page-specific code. In this scenario, you would still place all your JavaScript within the application.js dependency graph, but not all of this code would be loaded up-front. Webpack recognizes the dynamic import() function when it compiles your JS and will split the imported chunk out into a separate file that can be loaded on-demand in the browser using a JS framework router or a simple trigger.

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

For example, you could have code that looks like this:

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

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

Use page-specific "packs" combined with the splitChunks configuration API. In this scenario, instead of using an application.js pack, you would construct one for each page you want to treat differently, e.g, posts.js, admin.js etc. Using the splitChunks plugin means that your bundles can properly share code. I highly recommend treading carefully with this approach until you understand how Webpack works OR be willing to go through the process of learning Webpack in choosing this path. Webpack typically works best on the assumption you use only one entry point per page, otherwise, you may end up duplicate code across bundles unless you know what you're doing.

这篇关于使用 Rails 6，你把“页面特定"的 JavaScript 代码放在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！