Webpack - $ non è una funzione

Sto spostando una webapp esistente da requirejs a webpack.

Ho un problema con il modo in cui jQuery viene importato/spessorato.

Nel mio pacchetto js, sto ricevendo un errore $ is not a function dall'interno del javascript bootstrap.

Quando ho console.log($) all'interno dello script in bundle si rivela un oggetto vuoto: object {}

Io parto dal presupposto che questo è perché non viene esportato da jQuery come sarebbe tradizionalmente impostato $ all'oggetto finestra ed essere fatto.

Alcune ricerche mi hanno indicato l'uso di plug-in Webpack (vedere il mio webpack.config.js in basso), ma questo non sembra risolvere il problema.

C'è qualcosa di sbagliato nel mio setup?

Grazie

miei webpack.config.js:

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" } 
    ] 


    } 
}

Il codice pacchetto incriminato compilato:

/***/ 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() { 
......... 
.........

fonte

2016-01-27 Fraser

Quando si visualizza l'origine della pagina, è il jQuery file .js incluso? – unicorn2

Nella console, cosa succede se provi '$ .fn.jquery'? Questo dovrebbe mostrare la versione di jQuery che stai usando se è in fase di caricamento. – Adjit

Qualche ''error di console '? –

Si può anche provare exports-loader:

npm install --save-dev exports-loader

E conf IG:

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

O il problema può essere in quel ProviderPlugin non legge jquery alias, in modo da provare:

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

fonte

2016-01-28 18:16:52

Webpack - $ non è una funzione

risposta

Problemi correlati