在 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