无法使用 webpack 构建 jQuery ui

Question

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

jQuery.Deferred 异常：$(...).draggable 不是函数 TypeError: $(...).draggable 不是函数

还有错误：

jquery.js:4055 Uncaught TypeError: $(...).draggable is not a function

我对使用 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"),
        }
    },
}

我的入口点：

index.js

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

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

npx webpack --config config.js

这里没有错误输出。

我哪里错了？

更新 根据 cmets 中的 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 install --save jquery jquery-ui”时返回的内容

npm WARN saveError ENOENT: no such file or directory, open '.../webpack/package.json' npm WARN enoent ENOENT：没有这样的文件或目录，打开 '.../webpack/package.json' npm WARN webpack 无描述 npm WARN webpack 没有存储库字段。 npm WARN webpack 没有 README 数据 npm WARN webpack 没有许可字段。

这可能是安装问题吗？

Answer 1

据我了解，您需要做几件事：

• 您只需安装webpack-jquery-ui。

• 我认为您现在不应该在您的 webpack.config.js 中解析正确的 jquery-ui，只需删除 "jquery-ui" 的别名

resolve: {
  alias: {
    // bind to modules;
    modules: path.join(__dirname, "node_modules"),
  }
},

• 最后，我认为webpack-jquery-ui 不会为您导出jquery 对象，因此不要再在全局中分配和导出它，因为它目前在您的模块中与ProvidePlugin 可用。所以只需简单地写如下：

import '../sass/index.scss';

require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');

// $ is available in the module via `ProvidePlugin`
global.$ = global.jQuery = $;
import 'bootstrap';