javascript - Materialise $(...).sideNav 不是使用 Webpack 的函数

Question

我目前在使用 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
    });
})

Answer 1

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

第 1 步:

像这样导入Materialize:

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

第 2 步:

正如原始资源中所述:

MaterializeCSS is not compatible with 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