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在app.js中插入template.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

由于this.jQuery

，脚本无法访问jQuery

(function($){

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

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

仅替换jQuery

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

1 个答案: