无法使用webpack构建jqeuery ui

如何解决无法使用webpack构建jqeuery ui

我无法使用webpack在项目中成功包含JQuery UI。 JQuery一直在工作，但是当我访问需要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';

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

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：没有这样的文件或目录，请打开'... / webpack / package.json' npm WARN ENTENT ENOENT：没有此类文件或目录，请打开“ ... / webpack / package.json” npm WARN webpack暂无描述 npm WARN webpack没有存储库字段。 npm WARN webpack没有自述文件数据 npm WARN webpack没有许可证字段。

这现在是安装问题吗？

解决方法

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

您需要做的就是仅安装webpack-jquery-ui。
我认为您现在不应该在jquery-ui中解析正确的webpack.config.js，只需删除别名"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';