materialize-css Uncaught TypeError: Vel is not a function答案

【问题标题】：materialize-css Uncaught TypeError: Vel is not a functionmaterialize-css Uncaught TypeError: Vel is not a function
【发布时间】：2016-12-25 11:08:07
【问题描述】：

我使用 webpack 作为我的捆绑器/加载器，我可以很好地加载物化 css (js/css)，但是当我尝试使用 toast 时，它说

Uncaught TypeError: Vel is not a function

我在 index.js 主文件中包含该库：

import 'materialize-css/bin/materialize.css' import 'materialize-css/bin/materialize.js'

有谁知道为什么会发生这种情况？看捆绑的源码，materialize的js就在那里。

【问题讨论】：

我也遇到同样的问题...你找到原因了吗？

标签： javascript css npm webpack materialize

【解决方案1】：

遇到了同样的问题并想出了一些更简单的解决方案：只需要做两件事：

首先：在您的根模块中导入以下内容，例如app.js

//given you have installed materialize-css with npm/yarn

import "materialize-css";
import 'materialize-css/js/toasts';

第二个：如果是 webpack，设置以下插件或获取velocity.min.js 作为全局变量，就像使用 jquery 一样：

  new webpack.ProvidePlugin({
    "$": "jquery",
    "jQuery': "jquery",
    "Vel": "materialize-css/js/velocity.min.js"
  }),

【讨论】：

【解决方案2】：

确保uglifyJsPlugin是这样的。

 new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: false})

mangle 属性应为 false，以便源文件的变量名称在您缩小时不会更改。

【讨论】：

【解决方案3】：

我也在尝试将 materialize-css 与 webpack 一起使用，并且也遇到了这个问题（尽管原因不同）。 Materialize 并没有真正考虑到模块加载器，而是使用全局变量。他们还以您可能不希望在 webpack-workflow 中使用的方式将依赖项直接捆绑到他们的脚本中。

我有一个和你不完全一样的设置，但无论如何我都会分享它，希望它会有所帮助，我的 webpack+materialize 在我创建的文件中像这样工作；

/**
 * custom-materialize.js
 */

// a scss file where we include the parts I use.
require('./custom-materialize.scss');

/**
 * materialize script includes
 * we don't use all the plugins so no need to
 * include them in our package.
 */
require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
// note: we take these from npm instead.
//require('materialize-css/js/velocity.min');
//require('materialize-css/js/hammer.min');
//require('materialize-css/js/jquery.hammer');
require('materialize-css/js/global');
//require('materialize-css/js/collapsible');
require('materialize-css/js/dropdown');

然后从 npm npm install velocity-animate 安装 Velocity 并将全局Vel物化使用指向该包，而不是在webpack中。

  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'Vel': 'velocity-animate'
  }),

【讨论】：

【解决方案4】：

您必须在 index.html 中分别导入 css 和 js 文件你不能在 index.js 中导入 css 文件

【讨论】：