Webpack - $ không phải là chức năng

Question

Tôi đang di chuyển một ứng dụng web hiện có từ requirejs đến webpack.

Tôi gặp sự cố với cách jQuery được nhập/shimmed.

Trong js đi kèm của tôi, tôi nhận được lỗi $ is not a function từ bên trong javascript khởi động.

Khi tôi console.log($) từ bên trong kịch bản kèm nó cho thấy một đối tượng rỗng: object {}

Tôi giả định rằng điều này là do không có gì được xuất khẩu từ jQuery vì nó sẽ theo truyền thống đặt $ đến đối tượng cửa sổ và được thực hiện.

Một số nghiên cứu đã chỉ cho tôi sử dụng các plugin webpack (xem webpack.config.js của tôi bên dưới) nhưng điều này dường như không giải quyết được vấn đề.

Có điều gì sai trong thiết lập của tôi không?

Cảm ơn

webpack.config.js của tôi:

var path = require('path'); 
var webpack = require('webpack'); 
module.exports = { 
    //devtool: 'source-map', 

entry: ['./mobile.js'], 
resolve: { 
    root: "./js/", 
    alias: { 

     jquery: 'libs/jquery-1.9.1', 
     underscore: "libs/lodash-1.0.1", 
     //backbone: 'libs/backbone-1.0.0', 
     backbone: 'libs/backbone-0.9.10', 
     bootstrap: "libs/bootstrap-2.3.1", 
     ...... 
    } 
}, 
resolveLoader: { 
    root: path.join(__dirname, 'node_modules') 
}, 
output: { 
    path: './', 
    filename: 'bundle.js' 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "window.jQuery": "jquery" 
    }) 
], 
module : { 
    loaders: [ 
     { test: /\.html$/, loader: "text" }, 
     { test: /\.json$/, loader: "json" } 
    ] 


    } 
} 

Các vi phạm biên dịch mã bó:

/***/ function(module, exports, __webpack_require__) { 

    /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/* =================================================== 
    * bootstrap-transition.js v2.3.1 
    * http://twitter.github.com/bootstrap/javascript.html#transitions 
    * =================================================== 
    * Copyright 2012 Twitter, Inc. 
    * 
    * Licensed under the Apache License, Version 2.0 (the "License"); 
    * you may not use this file except in compliance with the License. 
    * You may obtain a copy of the License at 
    * 
    * http://www.apache.org/licenses/LICENSE-2.0 
    * 
    * Unless required by applicable law or agreed to in writing, software 
    * distributed under the License is distributed on an "AS IS" BASIS, 
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
    * See the License for the specific language governing permissions and 
    * limitations under the License. 
    * ========================================================== */ 


    !function ($) { 

     console.log($); //THIS GIVES THE EMPTY OBJECT {} 
     "use strict"; // jshint ;_; 


     /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) 
     * ======================================================= */ 

     $(function() { //$ IS NOT A FUNCTION OCCURS HERE 

     $.support.transition = (function() { 
......... 
......... 

Answer 1

Bạn cũng có thể thử exports-loader:

npm install --save-dev exports-loader 

Và conf ig:

{ 
    include: require.resolve('libs/jquery-1.9.1'), 
    loader: 'exports-loader?window.jQuery' 
} 

---

HOẶC vấn đề có thể ở ProviderPlugin mà không đọc jquery bí danh, vì vậy hãy thử:

new webpack.ProvidePlugin({ 
    $: "libs/jquery-1.9.1", 
    jQuery: "libs/jquery-1.9.1", 
    "window.jQuery": "libs/jquery-1.9.1" 
})