在 Rails 6 上使用 Ruby 管理 JavaScript 的最佳方法是什么？

Question

我正在尝试 RoR 6（我来自 MEAN，我没有接触过版本 3 中的 RoR），我发现一些麻烦来找到管理 JavaScript 代码的最佳方法。 可能是因为我的背景。

我已经阅读了很多有关该主题的内容（包括官方指南https://guides.rubyonrails.org/working_with_javascript_in_rails.html ），但似乎官方文档已过时。

根据文档，当您从 cli 生成 controller 时，它应该为该 controller 创建一个 .js 文件，但它不会发生。 此外，现在 Webpack 已添加到 RoR 6 并且 JavaScript 不再由 Asset Pipeline 管理（我对吗？）但没有任何关于此事的参考。

我想找到一种方法来为每个视图编写代码 JS，并将该代码与 rest 隔离。

我应该把所有的JS代码放在哪里？
如何隔离每个视图的 JS 代码？
由于 Bootstrap（通过使用 Yarn）和 Webpack 这种方式，我已将 jQuery 添加到项目中，但 $ 或 jQuery 未定义：

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

我会很感激一些帮助。

谢谢！

解决方案：

我找到了我要找的东西 --> https://stimulusjs.org

Basecamp 创建的 Stimulusjs 为每个 HTML 视图添加了一个 JS 层，让我们在编写 JS 代码时保持秩序和清晰。 它将 JS 文件与 DOM 连接起来，仅此而已。 足以添加一些 JS 来改进功能。

它与 Turbolinks 完美搭配，可与 Webpack 一起使用。 此外，它可以在 10 分钟内学会（不再）。 安装也非常简单。

无论如何，如果你需要了解一些关于 RoR 和 Webpack/Webpacker 的知识，你可以访问这些链接：

最后，如果您不想使用像 Stimulus 这样的 JS 框架来管理 RoR 下的 JS 代码，您可以随时为特定页面 JS 尝试这些 gem：

帕洛玛宝石： https://github.com/gnclmorais/paloma （未选中）
Pagescript gem： https://github.com/maxcal/pagescript （未选中）

Answer 1

对 Webpack 的更改非常新，文档还没有完全跟上。

在运行生成器时生成资产文件只能使用旧资产管道完成，即使那样也不是一个好主意。 它依赖于 Sprockets 特殊的require_tree指令，该指令会抓取目录中的所有文件并将它们添加到清单中。 按字母顺序，因此您无法控制执行顺序。

它还让初学者误以为他们放入users.js中的 js 只在他们的用户 controller 中执行，而实际上它们只是被整合到一个清单中。

使用 Webpack 您可以显式导入资产。

我应该把所有的JS代码放在哪里？

鼓励您将实际应用程序逻辑放置在app/javascript中的相关结构中。

如何隔离每个视图的 JS 代码？

虽然您可以在视图本身中使用javascript_pack_tag来要求特定文件，但这并不是一个好的习惯用法，因为它会创建不必要的 HTTP 请求和难以遵循的逻辑。

如果要确保在加载特定视图时执行代码，可以将数据属性添加到 body 标记并创建特殊事件：

# app/layouts/application.html.erb
<body data-action="<%= action_name >" data-controller="<%= controller_name %>">

// fired when turbolinks changes pages.
$(document).on('turbolinks:load', ()=>{
  let data = $(body).data();
  // replace myns with whatever you want
  $(this).trigger(`myns:${data.controller}`, data)
         .trigger(`myns:${data.controller}#${data.action}`, data)
         .trigger(`myns:#${data.action}`, data)
});

然后，您可以通过侦听您的自定义事件来包装特殊页面加载时应该发生的功能。

$(document).on('myns:users#show', ()=>{
  console.log("We are on users#show");
});

在 Rails 6 上使用 Ruby 管理 JavaScript 的最佳方法是什么？

问题描述

1 个解决方案

解决方案1
1 2020-04-28 21:25:01

我应该把所有的JS代码放在哪里？

如何隔离每个视图的 JS 代码？

在 Rails 6 上使用 Ruby 管理 JavaScript 的最佳方法是什么？

问题描述

1 个解决方案

解决方案1 1 2020-04-28 21:25:01

我应该把所有的JS代码放在哪里？

如何隔离每个视图的 JS 代码？

解决方案1
1 2020-04-28 21:25:01