webpack - 物化 jQuery 函数在 Webpack 应用程序中不起作用

Question

我最近将我的项目从 Meteor 迁移到了 Webpack，并且在尝试使用 Materialize.css 构建我的 UI 时遇到了错误。自定义具体化函数，如$(...).tooltip , 导致在控制台中抛出 Uncaught TypeError。这不允许我在我的应用程序中使用 Materialize。

尝试在 webpack 应用程序中使用 Materialize 时，还有其他人遇到过这类错误吗？任何有关如何解决这些问题的方向都将不胜感激。谢谢!

我用来在目录根目录的 index.js 中加载 Materialize 模块及其依赖项的代码如下。

index.js:

import 'materialize-loader';
import 'materialize-css/dist/css/materialize.css';
window.jQuery = require('jquery');
window.$ = require('jquery');
import 'materialize-css/dist/js/materialize.js';
import 'materialize-css/js/init.js';

Answer 1

为同样的问题而苦苦挣扎。您需要做的是在您的 webpack 配置中进行以下修改:

const webpack = require("webpack");

在导出选项中添加:

plugins: [
     new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.$": "jquery",
            "window.jQuery": "jquery"
    }),

此外，从 index.js 中删除以下语句:

import 'materialize-loader';
window.jQuery = require('jquery');
window.$ = require('jquery');
import 'materialize-css/js/init.js';

注意:我为 webpack 4+ 测试了这个；不确定它是否适用于其他版本。

合理的解释:materialize 插件的 js 文件可能使用 window.$ 或 window.jQuery 作为 jquery 方法，并且您可能必须在 webpack 配置中为其提供全局别名。