jQuery-Ui 不包含在 webpack 中？答案

【问题标题】：jQuery-Ui not included in webpack?jQuery-Ui 不包含在 webpack 中？
【发布时间】：2020-04-24 01:43:31
【问题描述】：

在我的 Rails 应用程序中。看来 jQuery-ui 没有正确加载。我已经尝试了两天，但我不明白为什么。可能有类似的问题，但不完全相同，没有一个能解决我的问题。这不会很复杂，但我不明白。

我正在尝试使 jQuery-ui 'tabs' 工作（或任何 jquery-ui 函数）。问题似乎是 jquery-ui 不知何故无法加载。

我收到以下错误消息：

Uncaught TypeError: $(...).tabs is not a function

我使用的是 rails 6，它使用了 yarn 和 webpacker。我也在使用 jQuery 和引导程序。其实是很常见的组合。

来自纱线完整性文件：

 "topLevelPatterns": [
    "@rails/actioncable@^6.0.0",
    "@rails/ujs@^6.0.0",
    "@rails/webpacker@4.2.2",
    "bootstrap@^4.4.1",
    "jquery-ui@^1.12.1",
    "jquery@^3.5.0",
    "popper.js@^1.16.1",
    "turbolinks@^5.2.0",
    "webpack-dev-server@^3.10.3"

我的 application.js：

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("jquery-ui")
require("bootstrap")

HTML和js基本抄自官方参考：https://jqueryui.com/tabs/

我的（不是这样的）自定义 js 代码：

$( document ).ready(function() {
    $( "#tabs" ).tabs();
});

我的html：

<div id="tabs">

      <ul>
        <li><a href="#tab1">One</a></li>
        <li><a href="#tab2">One</a></li>
        <li><a href="#tab3">One</a></li>
      </ul>

      <div id="tab1">
        <%= render 'interviews/side_list'  %>
      </div>
      <div id="tab2">
        <%= render 'companies/embed_show' if @company %>
      </div>
      <div id="tab3">
        <%= render 'contacts/side_list' if @contacts %>
      </div>

</div>

当我显示页面时，我得到：Uncaught TypeError: $(...).tabs is not a function

显然，jquery-ui 无法加载。

我已经尝试引用 jquery-ui 的 cdn url，我已经尝试了各种不同版本的变体...

运气不好。

我意识到类似的问题已经被问了 100 次，我已经全部用谷歌搜索过了。对于许多人来说，引用库的 CDN 版本是可行的。它不适合我，我不想走那条路。

我做我的研究，在我在这里问之前我很努力，但我没有运气。我之前使用过 jQuery-ui 没有问题。我怀疑这是 webpack 的问题——我还没有完全理解。这是我最好的猜测。

感谢任何提示

更新：添加我的 package.json：

{
  "name": "jrm",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "jquery-ui": "^1.12.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

【问题讨论】：

标签： jquery-ui webpack ruby-on-rails-6 webpacker

【解决方案1】：

解决了以下问题：

修改后的文件 - webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}));

module.exports = environment

从 javascript/application/application.js 文件中删除

import('jquery')

而是只从 jQuery-ui 导入所需的模块：

require('jquery-ui/ui/widgets/sortable')

有效！

【讨论】：