Question

我目前遇到Materialise和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步：

import像这样实现：

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

第2步：

如原始资源中所述：

MaterialiseCSS与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

Answer 2

这适用于我替换cdn

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

Answer 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>

实现$（...）。sideNav不是使用Webpack的函数

3 个答案: