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

Question

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

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

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

索引.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 配置中为其提供一个全局别名。