"Waves is not defined"错误，同时将材料设计引导与 webpack 一起包括在内

Question

我正在使用webpack来包含mdbootstrap

这就是我将其包含在项目中的方式：

require('mdbootstrap/css/mdb.min.css');
require('mdbootstrap/js/mdb.min.js');    

我也尝试了require('mdbootstrap')，但在这两种情况下我都收到以下错误：

vendor.js:71728 Uncaught ReferenceError: Waves is not defined
at Object.<anonymous> (vendor.js:71728)
at Object.<anonymous> (vendor.js:71729)
at __webpack_require__ (vendor.js:20)
at Object._require.modules (vendor.js:68202)
at __webpack_require__ (vendor.js:20)
at Object.defineProperty.value (vendor.js:68186)
at __webpack_require__ (vendor.js:20)
at Object.defineProperty.value (vendor.js:63)
at vendor.js:66

单独使用require('mdbootstrap/css/mdb.min.css');有效，但我也需要一个 js 文件。

Answer 1

我合作过：

厘米：npm install node-waves

主文件.js文件

var waves = required('node-waves')
window.Waves = waves 

Answer 2

如果您使用的是Vue，这是对我有用的解决方案：

安装节点波：

npm install node-waves --save

在 webpack 中声明它(在 webpack.dev.conf.js 和 webpack.prod.conf.js 中(：

new webpack.ProvidePlugin({
'Waves': 'node-waves'
}),

Answer 3

我也遇到了这个问题，我在 mdb.js 文件中找到了 Waves .js的代码，所以你不需要安装 node-waves。 我谷歌的解决方案是在 mdb 中注释这些代码.js

Waves.attach(‘.btn, .btn-floating’, [‘waves-light’]);
Waves.attach(‘.waves-light’, [‘waves-light’]);
Waves.attach(‘.navbar-nav a:not(.navbar-brand), .nav-icons li a, .navbar form, .nav-tabs .nav-item’, [‘waves-light’]);
Waves.attach(‘.pager li a’, [‘waves-light’]);
Waves.attach(‘.pagination .page-item .page-link’, [‘waves-effect’]);
Waves.init();/* FORMS */

这对我来说是工作。我的 mdb 版本是 4.3.2。