2017-09-11 18 views
1

私は実際にSymfonyとそのWebpack:Webpack Encoreの(簡略化された)バージョンを使用してWebサイトを開発しています。Webpack EncoreビルドファイルからjQueryにアクセスできない

私のウェブサイトは、私は彼らのCDNからjQueryのをロードすることを好むだろう、これは私がやっているものを実際には、古典的な

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

でのjQueryを使用して開始します唯一のJavascriptファイル、template.jsを、使用しています。ウェブパックを使用せずにjs/template.jsスクリプトをHTMLファイルにロードすると、すべて正常に動作します。

しかし、私はこの問題が発生し、build/app.jsjs/template.jsファイルの内容をコンパイルして出力するのWebPACKを伝え、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"); 
     }; 

を最後に、私はアンコール、それから.autoProvideJquery()メソッドを試してみましたapp.jsでいくつか変更されましたが、それでも動作しません。

答えて

0

スクリプトは、jQuery

によって置き換えため this.jQuery

(function($){ 

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

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

のjQueryのにアクセスできませんでした

関連する問題