如何將 Rails 6 中的 JqTree 與 webpacker 集成，樹不是 function

Question

我真的很想知道如何在我的 Rails 6 應用程序中將 jqTree 作為 webpacker webpack 集成

更新：-使用 yarn add jqtree 似乎神奇地解決了我的大部分問題，但是我目前面臨的樹不是 function 錯誤

我正在使用 Ancestry gem 來組織菜單項，我需要一個拖放 javascript 樹視圖解決方案，它可以很好地與 Ancestry gem 配合使用。 我選擇了 jqTree 作為我想要的解決方案，但我很高興被說服使用替代方案，因為周圍似乎有很多，但最初我只想能夠至少獲得一個在 Rails 6 中工作的樹視圖大概我必須從設置 jQuery 開始，為此有很多資源可以說明如何做到這一點，所以我想這更多的是關於如何在 Rails 6 應用程序中啟動和運行任何 jQuery 組件我想我必須從一個 jsx 文件並導入一些東西並將一些 css 導入 application.scss 但這應該是什么樣子我真的不確定

到目前為止，我已經按照https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker的說明設置了 jQuery

我可以通過一個簡單的警報確認這一切都已連接並正常工作

我已經取得了一些進展，而不是下載 jqTree 文件，我使用 yarn 來安裝 jqTree

更換

我已經下載了 jqTree 文件並將它們解壓縮到我的 javascript/packs 文件夾中名為 jqTree 的文件夾中

和

yarn add jqtree

現在我已經理清了應該沒有的要求； 所以

require ;'jqTree/tree.jquery.js'

變成

require('jqtree')

同樣在我的 javascript/packs 文件夾中，我創建了一個 sortable.js 文件，其中包含以下內容

require ;'jqTree/tree.jquery.js'

jQuery(window).on('load', function () {
  alert("Done"); //This works!
});

$(function() {
  $('#tree1').tree({
      data: data,
      autoOpen: true,
      dragAndDrop: true
  });
})

這; 在require語句中讓我很困惑，但控制台錯誤要求它

現在看起來像這樣

require("jqtree");
$(function() {
  alert($('#tree1').data('items'));
});

$('#tree1').tree({
    data: $('#tree1').data('items'),
    autoOpen: true,
    dragAndDrop: true
});

使用上面的代碼，我得到一個參考錯誤：數據未定義在視圖中我有以下代碼

<%=javascript_pack_tag("sortable")%>

<%= content_tag "div", id: "tree1", data: {items: @menu_items} do %>
  Loading items...
<% end %>

我現在遇到的問題是我的瀏覽器報告樹不是 function 的錯誤。

在我的 application.css.scss 我有

 *= require "jqtree.css"

哪個不起作用

Answer 1

我對此有一個詳細的答案，這花了我相當長的時間來整理，我將在接下來的幾天里用這個細節更新這個答案，但首先要讓所有東西都與 jQuery、jQuery-ui 和組件本身正確連接，在這種情況下是jqTree

Yarn 絕對是答案 從命令行開始添加相關包

yarn add jquery
yarn add jquery-ui
yarn add jqtree

一旦安裝了相關的紗線包，我需要使 jQuery 和 jQuery-ui 可用，原因我還沒有完全理解，一個簡單的要求是不夠的

在這篇文章之后https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

我在config/webpacker文件夾中設置了 environment.js 文件，看起來像這樣

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);
const aliasConfig = {
    'jquery': 'jquery-ui-dist/external/jquery/jquery.js',
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
};

environment.config.set('resolve.alias', aliasConfig);

module.exports = environment

重新啟動服務器后，我在app/javascript/packs文件夾中創建了一個名為 test.js 的簡單 js 文件，據我所知，這是所有 javascript 現在所在的位置，盡管仍然有可能通過將 javascript 放入assets/javascript中來使用鏈輪assets/javascript文件夾，我被告知，將 webpacker 與 sprockets 混合來服務 javascript 不是一個好主意，但沒有解釋。 Webpacker 確實也能夠提供樣式表，但是我仍然更喜歡我的樣式表由 app/assets 文件夾中的 sprocket 提供，並使用傳統上在 Rails 應用程序中完成的樣式表鏈接標簽，因為測試證明這種方式更有效，所以混合以這種方式使用 webpacker 的 sprockets 似乎不是問題。

我只是在 test.js 文件中添加了一條簡單的警報消息，只是為了檢查 webpacker 和 jQuery 是否都正確連接。

所以 test.js 看起來像這樣

require("jquery-ui");
require("jqtree");

$(function() {
  alert($('#tree1').data('items'));
});

然后使用 javascript 我只是在視圖中包含了一個 javascript 包標簽，我想像這樣使用它。

在隨機編輯中。html.erb 視圖

<h1>Editing Menu Item</h1>

<%= render 'form', menu_item: @menu_item %>

<%= link_to 'Show', [:admin, @menu_item] %> |
<%= link_to 'Back', admin_menu_items_path %>

<%=javascript_pack_tag("test")%>

不需要文件名的路徑或擴展名，它就可以工作！

我發現這種方法非常簡潔，有兩個原因

1) 通過將頁面特定的 javascript 包含在 application.js 文件中，我不會不必要地膨脹 web 頁面，該文件默認包含在布局中，因此包含在每個頁面中。

2）我似乎不必擔心 DOM 加載事件，到目前為止還沒有 turbolinks 干擾它的問題，盡管我懷疑這可能更多是靠運氣而不是判斷，我可能不得不在未來修改這個想法並做出使用'data-turbolinks-track': 'reload'選項，但到目前為止還不錯，這不是必需的。

因此，現在一切都已連接並正常工作，是時候讓 jqTree 組件與祖先 gem 一起使用，以便能夠為站點構建和組織菜單項，

但到目前為止，使用紗線頂部安裝組件並正確連接 jQuery 是一件簡單的事情。 我最初沒有使用紗線，這導致我遇到了各種各樣的問題，導致了我最初的問題。

rest 緊隨其后...