如何将 Rails 6 中的 JqTree 与 webpacker 集成，树不是函数

Posted 2023-03-07

【中文标题】如何将 Rails 6 中的 JqTree 与 webpacker 集成，树不是函数

【英文标题】：How to integrate JqTree in Rails 6 with webpacker, tree is not a function

【发布时间】：2020-08-17 12:47:04

【问题描述】：

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

更新：- 使用 yarn add jqtree 似乎已经神奇地解决了我的大部分问题，但是我目前面临 tree is not a 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 %>

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

在我的 application.css.scss 我有

 *= require "jqtree.css"

这不起作用

【问题讨论】：

我还在想着潜入webpack世界但是没有足够的勇气！但这是一个截屏视频，可能会显示路径 gorails.com/episodes/rails-drag-and-drop-sortable

@AmitPatel 我正在用制作维基的想法回答我自己的问题。我还有很多细节要添加到我的答案中，但到目前为止我提供的细节应该足以让任何人开始使用 webpacker。值得将脚趾浸入水中

【参考方案1】：

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

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

yarn add jquery
yarn add jquery-ui
yarn add jqtree

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

关注这个帖子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 与 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 包标签，我想像这样使用它。

在随机的 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 干扰它的问题，尽管我怀疑这可能更多是靠运气而不是判断，我可能不得不在未来并利用'data-turbolinks-track': 'reload' 选项，但到目前为止一切顺利，这没有必要。

现在一切都已连接并开始工作，是时候让 jqTree 组件与 ancestry gem 一起使用，以便能够为网站构建和组织菜单项，

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

剩下的就是跟着...