Javascript 无法使用Web包构建jQuery ui

我无法使用webpack在项目中成功包含jQuery UI。jQuery一直在工作，但当我访问需要jQuery UI的应用程序页面时，我收到以下警告：

延迟异常：$（…）.DragTable不是函数类型错误：$（…）.DragTable不是函数

和错误：

jquery.js:4055未捕获类型错误：$（…）。Dragable不是函数

我几乎不熟悉使用webpack/node构建javascript代码，所以很可能我犯了一个幼稚的错误

这是我的配置文件：

config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: './src/js/index.js',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: 'path/js',
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/index.css',
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        })
    ],
    resolve : {
        alias: {
            // bind version of jquery-ui
            "jquery-ui": "jquery-ui/jquery-ui.js",
            // bind to modules;
            modules: path.join(__dirname, "node_modules"),
        }
    },
}

import '../sass/index.scss';
const $ = require("jquery");
require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');
global.$ = global.jQuery = $;
import 'bootstrap';

我的入口点：

index.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: './src/js/index.js',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: 'path/js',
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/index.css',
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        })
    ],
    resolve : {
        alias: {
            // bind version of jquery-ui
            "jquery-ui": "jquery-ui/jquery-ui.js",
            // bind to modules;
            modules: path.join(__dirname, "node_modules"),
        }
    },
}

import '../sass/index.scss';
const $ = require("jquery");
require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');
global.$ = global.jQuery = $;
import 'bootstrap';

每次进行更改时，我都会运行以下命令：

npx网页包--config.js

此操作没有错误输出

我哪里做错了

更新 根据Chris G在评论中的建议，我尝试了以下方法：

import '../sass/index.scss';
const $ = require('webpack-jquery-ui');
global.$ = global.jQuery = $;
import 'bootstrap';

重建后，控制台中出现一系列错误，例如：

ERROR in (webpack)-jquery-ui/index.js
Module not found: Error: Can't resolve 'jquery- 
ui/themes/base/autocomplete.css' in 
'.../webpack/node_modules/webpack-jquery-ui'
@ (webpack)-jquery-ui/index.js 57:0-49
@ ./src/js/index.js

这是运行“npm安装--保存jquery jquery ui”时返回的结果

npm WARN saveError ENOUNT:没有这样的文件或目录，请打开“…/webpack/package.json” npm WARN ENOINT ENOINT:没有这样的文件或目录，请打开“…/webpack/package.json” npm警告网页包无说明 npm警告网页包无存储库字段。 npm警告网页没有自述文件数据 npm警告网页包无许可证字段

---

这可能是安装问题吗？

据我所知，您需要做以下几件事：

• 您只需安装

  webpackjqueryui

• 我认为您现在不应该在

  webpack.config.js

  中解析正确的

  jqueryui

  ，只需删除

  “jqueryui”

  的别名即可

解析：{
别名：{
//绑定到模块；
modules:path.join（\uuu dirname，“node\u modules”），
}
},

• 最后，我认为

  webpack jquery ui

  不会为您导出

  jquery

  对象，因此不再在全局中分配和导出它，因为它当前在您的模块中可用

  ProvidePlugin

  。因此，只需简单地写如下：

import'../sass/index.scss'；
要求（'webpack-jquery-ui'）；
要求（'webpack-jquery-ui/draggable'）；
//通过“ProvidePlugin”在模块中提供$`
全局。$=global.jQuery=$；
导入“引导”；

根据您的建议，您不需要包含

jquery

，因为

网页jquery ui

已经包含了这两个部分。谢谢@ChrisG-我根据您的建议进行了调整，并更新了问题以解释发生了什么。在努力重新构建代码时，我一定是弄错了。谢谢-在采取行动之后，我得到了一长串错误，这些错误对于jquery ui的不同部分都非常相似：./node_modules/jquery ui/themes/base/accordion.css 11:0模块解析失败：意外令牌（11:0）您可能需要一个合适的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅|*/>.ui accordion.ui accordion header{显示：block；|光标：pointer；@（网页包）-jquery ui/index.js 56:0-46@./src/js/index.js它看起来像是自动导入css，但您忘记了处理此文件。只需通过更改为

test://\（scss）尝试为css加载程序添加
css
文件即可$/，

Boom！你解决了这个问题：D非常感谢。我想在使用webpack构建代码的几周内，这些错误会更有意义。