Kein Zugriff auf jQuery über die Webpack Encore-Build-Datei - jquery, symfony, webpack, webpack-encore

Ich entwickle gerade eine Website mit Symfony und deren (vereinfachte) Version von Webpack: Webpack Encore.

Meine Website verwendet nur eine Javascript-Datei. template.js, die jQuery verwendet und mit einem Klassiker beginnt

$(document).ready(function(){ ... })(jQuery);

Ich würde es vorziehen, jQuery von ihrem CDN zu laden, und genau das mache ich jetzt. Wenn ich das lade js/template.js Wenn Sie ein Skript in die HTML-Datei schreiben, ohne ein Webpack zu verwenden, funktioniert alles einwandfrei.

Aber wenn ich webpack sage, das zu kompilieren und auszugeben js/template.js Dateiinhalt zu build/app.js und fügen Sie es in die HTML-Datei ein, dies geschieht:

Uncaught TypeError: $ is not a function
at template.js:12
at Object.<anonymous> (template.js:11)
at Object../assets/js/template.js (app.js:1898)
at __webpack_require__ (bootstrap 405ca97655117f294089:19)
at Object.0 (jquery.js:10253)
at __webpack_require__ (bootstrap 405ca97655117f294089:19)
at bootstrap 405ca97655117f294089:62
at bootstrap 405ca97655117f294089:62

Hinweis: Ich denke, Webpack findet einen Weg, der Browserkonsole mitzuteilen, dass dieser Code tatsächlich zur Verfügung steht js/template.js, aber keine Sorge, ich verwende nur build/app.js.

Das Problem ist also, dass mein Code jetzt nicht auf jQuery zugreifen kann. Es ist, als ob Webpack meinen Code in einem Bereich umgibt, in dem er außerhalb von außen nicht auf etwas zugreifen kann.

Webpack fügt etwas Code hinzu, bevor der Inhalt von eingefügt wird template.js in app.js, und so fängt es tatsächlich an, es einzufügen:

/***/ "./assets/js/template.js":
/*!*******************************!*
!*** ./assets/js/template.js ***!
*******************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports) {

(function ($) {
$(document).ready(function () {

if ($(".boxed .fullscreen-bg").length > 0) {
$("body").addClass("transparent-page-wrapper");
};

Schließlich habe ich die .autoProvideJquery () -Methode von Encore ausprobiert app.js funktioniert aber immer noch nicht.

Antworten:

Das Skript konnte wegen des Befehls nicht auf jQuery zugreifen this.jQuery

(function($){

$(document).ready(function(){
...
});

})(**this.**jQuery);

Nur durch ersetzen jQuery