实现jQuery函数在Webpack应用程序中不起作用

2019年7月28日 229次阅读

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

在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';

最佳答案 挣扎着同样的问题.您需要做的是在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.jQuery用于jquery方法,可能你必须在webpack配置中给出相同的全局别名.

点赞