如何通过 webpacker 将 jstree 添加到 Rails

Posted 2023-05-09

【中文标题】如何通过 webpacker 将 jstree 添加到 Rails

【英文标题】：How to add jstree via webpacker to Rails

【发布时间】：2021-07-20 21:22:39

【问题描述】：

我有一个 Rails 6 应用程序，我通过 yarn 添加了 jstree 库。我有application.js 文件，require 语句在哪里。我想做以下 $('#tree').jstree(); 但这会导致 function jstree undefined 异常。我应该如何要求它？

【参考方案1】：

创建一个新的 Rails 应用：

rails new myapp
cd myapp

安装 jstree 和 jQuery（依赖）：

yarn add jstree jquery

创建一个新的控制器和视图：

rails g controller welcome index

启动开发服务器和 Rails 服务器：

./bin/webpack-dev-server
rails s

在packs/application.js:

require('../../../node_modules/jstree/dist/themes/default/style.min.css');
global.$ = require('jquery');
require('jstree');

$(() => 
  $('#jstree').jstree();
);

添加一些 html 到 welcome#index:

<div id="jstree">
  <ul>
    <li>Root node 1
      <ul>
        <li id="child_node_1">Child node 1</li>
        <li>Child node 2</li>
      </ul>
    </li>
    <li>Root node 2</li>
  </ul>
</div>

访问 http://localhost:3000/welcome/index 以查看 jstree 的运行情况。

HTH

【讨论】：

感谢 James 的深入回复。 Still getting the following error: application.js:39 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).jstree is not a function

require('../../../node_modules/jstree/dist/themes/default/style.min.css'); global.$ = require("jquery"); require('jstree'); global.jQuery = global.$; $(() => $('#jstree').jstree(); );

所以，我在上面发布的内容有效，但是当您尝试在您的应用中实现它时，您会收到错误消息。我说对了吗？

是的，绝对的

好的，如果你能做一个简单的例子（除了重新创建错误所需的内容之外，去掉所有内容），把它贴在 GitHub 上，让我有一个 repo 的链接，我'我看看。