Webpack打包WordPress插件时jquery-toast-plugin调用失败问题排查

开发WordPress插件时，使用Webpack打包JavaScript代码，引入jquery-toast-plugin后浏览器控制台报错：Uncaught TypeError: $.toast is not a function。其他jQuery功能正常，且通过CDN导入该插件时能正常显示提示框。

业务代码片段 #

import 'jquery-validation';
import toastr from 'toastr';
import 'jquery-toast-plugin';

class ManualOrder {
    constructor() {
        this.host = 'https://dev7.digitaldocks.de/';

        $.toast({
            heading: 'Welcome to my website',
            text: 'test',
            showHideTransition: 'slide',
            icon: 'success'
        });
    }
}

Webpack配置 #

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

const config = {
    entry: {
        strayfe_fbsb_bundled: './public/assets/src/js/index.js',
        strayfe_main: './public/assets/src/scss/main.scss',
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './public/assets/dist'),
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: require.resolve('jquery'),
            jquery: require.resolve('jquery'),
        }),
        new MiniCssExtractPlugin({
            filename: ({ chunk }) => (chunk.name === 'main_css' ? 'strayfe_main.css' : '[name].css'),
        }),
        new IgnoreEmitPlugin(['strayfe_main.js']),
    ],

    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
};

module.exports = config;

可行的CDN测试代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo - Toast Plugin</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="module">
        import 'https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js';
            $.toast({
                heading: 'Welcome to my website',
                text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quibusdam.',
                showHideTransition: 'slide',
                icon: 'success'
            })
    </script>
</body>
</html>

问题根源在于jquery-toast-plugin需要挂载到全局jQuery对象上，但Webpack默认将jQuery封装在模块作用域内，导致插件无法找到正确的挂载目标。

方案一：修改Webpack配置暴露全局jQuery #

更新webpack.ProvidePlugin配置，将jQuery暴露到全局window对象：

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery'
}),

这样插件就能找到全局的jQuery实例并挂载toast方法。

方案二：显式传递jQuery给插件 #

部分jQuery插件的UMD模块支持显式接收jQuery参数，修改业务代码的导入逻辑：

import $ from 'jquery';
import 'jquery-validation';
import toastr from 'toastr';
// 手动将jQuery实例传递给插件
require('jquery-toast-plugin')($);

class ManualOrder {
    constructor() {
        this.host = 'https://dev7.digitaldocks.de/';

        $.toast({
            heading: 'Welcome to my website',
            text: 'test',
            showHideTransition: 'slide',
            icon: 'success'
        });
    }
}

方案三：锁定插件版本 #

确保本地安装的jquery-toast-plugin版本与CDN使用的一致（CDN版本为1.3.2），避免版本差异导致的挂载逻辑变化：

npm install jquery-toast-plugin@1.3.2 --save

原理说明 #

Webpack的模块打包机制会将jQuery隔离在模块作用域中，而jquery-toast-plugin默认会查找全局window.jQuery来扩展方法。通过暴露全局jQuery或显式传递实例，就能让插件正确完成挂载，解决$.toast is not a function的错误。

内容的提问来源于stack exchange，提问作者Synistic