Rails6中JqTree如何与webpacker集成，tree不是函数

Question

我真的很想知道如何将 jqTree 作为 webpacker webpack 集成到我的 Rails 6 应用程序中

更新：- 使用 yarn add jqtree 似乎神奇地解决了我的大部分问题，但是我目前面临 tree is not a function 错误

我正在使用 Ancestry gem 来组织菜单项，我需要一个拖放 javascript 树视图解决方案，它可以很好地与 Ancestry gem 配合使用。我选择了 jqTree 作为我想要的解决方案，但我很高兴被说服使用替代方案，因为周围似乎有很多但最初我只是希望至少能够在 Rails 6 大概我必须从设置 jQuery 开始，关于如何执行此操作的资源很多，所以我想这更多是关于如何设置任何 jQuery 组件和运行在 Rails 6 个应用中我想我必须从一个 jsx 文件开始并导入一些东西并将一些 css 导入 application.scss 但是我真的不确定这应该是什么样子

到目前为止，我已经根据这里的说明设置了 jQuery https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

我可以通过一个简单的警报确认这一切都已连接并正常工作

我又进步了一些我没有下载 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 %>

我现在遇到的问题是我的浏览器报告错误，树不是一个函数。

在我的 application.css.scss 我有

 *= require "jqtree.css"

哪个不起作用

Answer 1

我有一个详细的答案，花了我 quite 的时间整理，我将在未来几天用这个细节更新这个答案，但首先要正确连接所有内容jQuery、jQuery-ui 和组件本身，在本例中是 jqTree

纱线绝对是答案从命令行开始添加相关包

yarn add jquery
yarn add jquery-ui
yarn add jqtree

一旦安装了相关的 yarn 包，我需要使 jQuery 和 jQuery-ui 可用，原因我还没有完全理解，一个简单的 require 不够

关注这个posthttps://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 文件夹中来使用 sprockets 的可能性，我被告知，没有解释为什么，将 webpacker 与 sprockets 混合用于服务 [=62 不是一个好主意=]. Webpacker 确实也有提供样式表的能力，但是我仍然更喜欢我的样式表由 app/assets 文件夹中的链轮提供，并使用样式表 link 标签，就像 Rails 应用程序中的传统做法一样测试证明这种方式更有效，因此以这种方式将 sprockets 与 webpacker 混合似乎不是问题。

我只是在 test.js 文件中添加了一条简单的警报消息，只是为了检查 webpacker 和 jQuery 是否已正确连接。

所以test.js看起来像这样

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

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

然后使用 javascript 我只是在视图中包含了一个 javascript pack 标签，我想像这样使用它。

在随机 edit.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 文件中，我并没有不必要地膨胀网页每页。

2) 我似乎不必担心 DOM 加载的事件，并且到目前为止没有 turbolinks 干扰它的问题，尽管我怀疑这可能更靠运气比 judgement 和我可能不得不在未来修改那个想法并利用 'data-turbolinks-track': 'reload' 选项，但到目前为止一切顺利，这不是必需的。

所以现在一切都已连接并开始工作，是时候让 jqTree 组件与祖先一起工作 gem 以便能够构建和组织站点的菜单项，

但到目前为止，使用 yarn top install 组件并正确连接 jQuery 是一件简单的事情。我最初没有使用纱线，这导致我遇到了各种各样的问题，导致了我原来的问题。

剩下的就是后续了...

Rails6中JqTree如何与webpacker集成，tree不是函数

How to integrate JqTree in Rails 6 with webpacker, tree is not a function

ruby-on-rails

ruby-on-rails-6

webpacker

jqtree