Symfony 3.3 前端堆栈与 encore - global jquery 插件

Question

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

我在全球使用 jquery 插件时遇到问题。我试过这个： Webpack Encore - jQuery 插件不在视图中，这仍然不起作用...

所以。。。 我的网络包配置：

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();

在供应商中.js我包括全球.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 插件都可以正常工作。 在创建配置文件中.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