带 encore 的 Symfony 3.3 前端堆栈 - 全局 jquery 个插件

Question

我正在尝试使用 Materialize css 框架制作 symfony 应用程序。根据官方 3.3 文档，我正在使用 encore 作为前端。

我的 jquery 全局插件有问题。我试过这个：这仍然不起作用...

所以... 我的 webpack 配置：

var Encore = require("@symfony/webpack-encore");
var webpack = require('webpack');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .autoProvidejQuery()
    .createSharedEntry('vendor', [
        'materialize-css',
        './assets/js/global.js',
    ])

    .addStyleEntry('global', './assets/scss/global.scss')
    .addEntry("createProfileModule", "./assets/js/modules/createProfile.js")

    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .enableVueLoader()
    .addPlugin(new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        // In case you imported plugins individually, you must also require them here:
        Util: "exports-loader?Util!bootstrap/js/dist/util",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    }))
    .enableVersioning()
;

module.exports = Encore.getWebpackConfig();

在 vendor.js 我将 global.js 包括：

$(document).ready(() => {
    $('.modal').modal();
    $(".modal .close-btn").on("click", () => {
        $('.modal').modal('close');
    });

    $(".button-collapse").sideNav();

    $("#registerModal form").submit((e) => {
        e.preventDefault();

        $(".modal .progress").fadeIn().promise().done(() => {
            setTimeout(() => {
                window.location = "/stworz-profil";
            }, 2500)
        })
    });
});

在此文件中，任何 jquery 插件都可以正常工作。在 createProfile.js:

$('input.autocomplete').autocomplete({
    data: {
        "Gdańsk": null,
        "Gdynia": null,
        "Sopot": null,
        "Warszawa": null,
    },
    limit: 20,
    onAutocomplete: function(val) {

    },
    minLength: 1,
});

当我在控制台中加载页面时，我看到：

Uncaught TypeError: $(...).autocomplete is not a function
    at Object../assets/js/modules/createProfile.js (createProfileModule.61543364cceab7b76d2b.js:13)
    at __webpack_require__ (manifest.d41d8cd98f00b204e980.js:55)
    at webpackJsonpCallback (manifest.d41d8cd98f00b204e980.js:26)
    at createProfileModule.61543364cceab7b76d2b.js:1

如何在全球范围内提供 jquery 插件？

Answer 1

好的，经过几次尝试，我明白了。

解决方法是在自动完成前添加$(document).ready

带 encore 的 Symfony 3.3 前端堆栈 - 全局 jquery 个插件

Symfony 3.3 frontend stack with encore - globally jquery plugins

javascript

jquery

symfony

webpack

webpack-encore