无法使用 webpack build jQuery ui

Question

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

jQuery.Deferred exception: $(...).draggable is not a function TypeError: $(...).draggable is not a function

错误：

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

没有错误输出。

我哪里错了？

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

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

在 rebuilding 后，我在控制台中收到一系列错误，例如：

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

这是运行ning "npm install --save jquery jquery-ui"

时返回的内容

npm WARN saveError ENOENT：没有那个文件或目录，打开'.../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';

无法使用 webpack build jQuery ui

Unable to build jQuery ui with webpack

javascript

jquery-ui

node.js

webpack