2

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

我对全局的 jquery 插件有疑问。我试过这个： Webpack Encore - jQuery plugins out of view但这仍然无法正常工作......

所以...我的 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 提供插件？

4

1 回答 1

0

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

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

于 2017-08-22T12:55:32.620 回答