如何将Rails6中的JqTree与webpacker集成，树不是一个函数

Question

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

更新：-使用yarn add-jqtree似乎神奇地解决了我的大部分问题，但我目前面临的问题是树不是一个函数错误

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

到目前为止，我已经按照这里的说明设置了jQueryhttps://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 %>

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

在我的应用程序.css.scss中，我有

*= require "jqtree.css"

不起作用

Answer 1

我对此有一个详细的答案，我花了很长时间才整理好，我将在未来几天用这个细节更新这个答案，但它首先要让所有东西都与jQuery、jQuery ui和组件本身正确连接，在本例中是jqTree

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

yarn add jquery
yarn add jquery-ui
yarn add jqtree

一旦安装了相关的yarn包，我需要使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文件夹中来使用链轮，但有人建议我，将webpacker与链轮混合用于提供javascript不是一个好主意，但没有解释原因。Webpacker也有能力提供样式表，但我仍然希望我的样式表由app/assets文件夹中的链轮提供，并像在Rails应用程序中传统地使用样式表链接标签，因为测试证明这种方式更有效，所以以这种方式将链轮与Webpacker混合似乎不是问题。

我只是在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文件中，从而使网页膨胀，该文件默认情况下会包含在布局中，因此也会包含在每个页面上。

2) 我似乎不必担心DOM加载的事件，到目前为止也没有涡轮链接干扰它的问题，尽管我怀疑这可能更多是运气而非判断，我可能不得不在未来修改这个想法，并使用'data-turbolinks-track': 'reload'选项，但到目前为止还不错，这还没有必要。

因此，现在所有的东西都连接起来并工作了，是时候让jqTree组件与祖先宝石一起工作了，以便能够为网站构建和组织菜单项

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

剩下的就是跟随。。。