无法从 Webpack Encore 构建文件访问 jQuery

Question

我实际上正在使用 Symfony 开发一个网站，以及他们的（简化）版本的 webpack：Webpack Encore。

我的网站只使用一个 Javascript 文件 template.js，它使用 jQuery 并以经典

开头

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

我更愿意从他们的 CDN 加载 jQuery，而这正是我正在做的。如果我在不使用任何 webpack 的情况下将 js/template.js 脚本加载到 HTML 文件，一切正常。

但是，如果我告诉 webpack 编译并将 js/template.js 文件内容输出到 build/app.js 并将其包含在 HTML 文件中，就会发生这种情况：

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

注意： 我认为 Webpack 找到了一种方法来告诉浏览器控制台这个实际代码提供自 js/template.js，但别担心，我只使用 build/app.js.

所以问题是现在，我的代码无法访问 jQuery。这就像如果 Webpack 将我的代码包围在一个它无法访问任何外部内容的范围内。

Webpack 在将 template.js 的内容插入 app.js 之前添加了一些代码，下面是它实际开始插入的方式：

/***/ "./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");
        };

最后，我尝试了 Encore 的 .autoProvideJquery() 方法，它改变了 app.js 中的一些东西，但仍然不起作用。

Answer 1

脚本无法访问 jQuery，因为 this.jQuery

(function($){

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

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

仅替换为jQuery

无法从 Webpack Encore 构建文件访问 jQuery

Cannot acces jQuery from Webpack Encore build file

jquery

symfony

webpack

webpack-encore