Materialize $(...).sideNav 不是使用 Webpack 的函数答案

【问题标题】：Materialize $(...).sideNav is not a function using WebpackMaterialize $(...).sideNav 不是使用 Webpack 的函数
【发布时间】：2017-03-22 02:29:27
【问题描述】：

我目前遇到了 Materialize 和 Webpack 的问题。我正在尝试创建两个文件 index-bundle.js 和 vendor-bundle.js 来包含我的项目使用的不同 javascript 文件。但是我一直遇到这个问题并收到此错误TypeError: $(...).sideNav is not a function，我已经尝试解决这个问题几天了，但没有运气。如果我猜测它可能与 JQuery 有关，但我不确定。如果有人可以提供帮助，我将不胜感激。谢谢

更新：编译几次后错误变为TypeError: menu.velocity is not a function。仍然让我相信它与 jQuery 有关。

以下是一些可能具有一定重要性的文件。

base.html：https://github.com/MattsLab/MattsLab/blob/master/views/layouts/base.html

webpack.config.js：https://github.com/MattsLab/MattsLab/blob/master/webpack.config.js

Gulp 任务：

    gulp.task("scripts:build", () => {
    return gulp.src('assets/scripts/**/*.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('public'));
});

Webpack.config.js

const path = require('path');
const util = require("gulp-util");
const webpack = require('webpack');

const config = {
    production: process.env.NODE_ENV == "production",
};


module.exports = {
    entry: {
        index: './assets/scripts/app.js',
        vendor: ['jquery/dist/jquery.js', 'materialize-css/dist/js/materialize.js'],
    },
    output: {
        filename: '[name]-bundle.js',
        path: path.resolve(__dirname, 'public/')
    },
    resolve: {
        modulesDirectories: ["node_modules"]
    },
    module: {
        loaders: [{
            loader: "babel-loader",
            include: [
                path.resolve(__dirname, "assets/scripts"),
            ],
            test: /\.js$/,

            query: {
                presets: ['es2015'],
                plugins: ['transform-runtime']
            }
        }, ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': config.production ? JSON.stringify('production') : process.env.NODE_ENV
            }
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            Hammer: "hammerjs/hammer"
        }),
    ]
};

if (config.production) {
    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
        sourceMap: false
    }))
}

app.js

$(document).ready(function() {
    $(".button-collapse").sideNav({
        menuWidth: 150
    });
})

【问题讨论】：

您是在本地工作还是有网址可以看一下？该问题可能与脚本文件的加载方式有关。
^他说的。确保在 Materialize 之前加载 Jquery
我更新了我的帖子以包含指向我的 base.html 的链接，这是我添加 JS 和 webpack 配置的地方。我的整个项目都是公开的，所以一切都应该在那里。
@MattBrowning：我也遇到了同样的问题，你解决了吗？

标签： javascript jquery webpack gulp materialize

【解决方案1】：

经过一番搜索，我能够使用以下配置解决此问题。

第 1 步：

像这样导入物化：

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

第 2 步：

如原始资源中所述：

MaterializeCSS 与 jQuery 3 不兼容

现在，显然不是最好的解决方案，但它确实有效。在 html 页面中添加对旧版本 jQuery 的引用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

第 3 步：

将此添加到您的 webpack.config 文件中：

externals: {
  jquery: 'jQuery'
}

最后：

初始化插件：

$('.selector').sideNav();

Original source of answer

【讨论】：

【解决方案2】：

这对我有用，替换 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

【讨论】：

【解决方案3】：

我遇到了类似的错误，但一个简单的解决方案对我有用，替换

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

【讨论】：