Question

我尝试在webpack的测试应用中使用jQuery验证插件，当我import在我的文件中时，我收到此错误$(...).validate is not a function。

我知道jquery-validation基于IIFE并且需要jquery在全局范围内，我已经在我的配置中公开过了。

这是自我：

{
    entry: {
        app: "./assets/js/app.jsx"
    },
    output: {
        path: path.join(__dirname, "/build/js"),
        publicPath: "/build/js",
        filename: "[name].bundle.js"
    },
    resolve: {
        modulesDirectories: ["node_modules", "bower_components"],
        alias: {
            "jquery": "jquery/dist/jquery.min",
            "jquery.validate": "jquery-validation/dist/jquery.validate"
        },
        extensions: ["", ".js", ".jsx", ".es6"]
    },
    amd: {
        jQuery: true
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel"
            },
            {
                test: /jquery.validate/,
                include: /node_modules/,
                loader: "imports?jQuery=jquery"
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            "$": "jquery",
            "jQuery": "jquery"
        })
    ],
    devtool: "source-map"
}

并使用它：

import "jquery.validate"

$("#test").validate();

P.S。看起来jQuery-validation插件试图使用自己的jquery实例，我想通过比较我的文件$.fn中的[jquery: "3.1.0"]和验证插件[jquery: "2.2.4"]的IIFE内部，但是如何阻塞它使用我的版本？

任何帮助都将不胜感激。

Answer 1

在我的设置中，jquery-validate将自身添加到jquery所需的自己的node_modules/jquery-validation/node_modules/jquery实例中，而不是ES6应用程序中存在的实例。

这似乎可以解决该问题：

import 'imports-loader?define=>false,module.exports=>false!jquery-validation';

这需要webpack的imports-loader插件。

yarn add imports-loader --save-dev

可能有一种方法可以在webpack中进行全局配置。

Answer 2

resolve: {
        modulesDirectories: ["node_modules", "bower_components"],
        alias: {
 "jquery.validate": "jquery-validation/dist/jquery.validate",           
 "jquery": "jquery/dist/jquery.min"

        },
        extensions: ["", ".js", ".jsx", ".es6"]
    },

只需更改文件的位置即可。

尝试此解决方案，我希望它适合您

导入验证插件错误：$（...）。validate不是函数

2 个答案: