Webpack: dipendenza dal modulo di espressione

Question

Sto provando a require il modulo bootstrap-webpack nella mia applicazione webpacked.

Sembra avere bisogno di jQuery, dal momento che il javascript in bundle getta quindi la seguente:

Uncaught ReferenceError: jQuery non è definito

Come faccio a specificare per webpack che jQuery è una dipendenza per il modulo bootstrap-webpack, per risolvere questo problema? Sembra che dovrebbe essere banale, ma ho faticato a capirlo.

Ho provato ad aggiungere:

"jquery": "latest" 

alle dependecies nella zona di bootstrap-webpack package.json, ma questo non ha funzionato. Il documentation è incompleto e non riesco a trovare molto su questo problema. Dovrebbe essere banale, giusto? Aiuto!

Answer 1

Esistono due soluzioni possibili:

Utilizza la ProvidePlugin: Si analizza il codice sorgente per l'identificatore dato e lo sostituisce con un riferimento al modulo dato, come è stato richiesto.

// webpack.config.js 
module.exports = { 
    ... 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }) 
    ] 
}; 

Utilizzare la imports-loader: Esso prevede la possibilità di anteporre preparati come require() dichiarazioni.

// webpack.config.js 
{ 
    ... 
    module: { 
     loaders: [ 
      { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" } 
     ] 
    } 
} 

In questo caso è necessario eseguire npm install imports-loader --save prima.

Answer 2

Via this github issue.

Installare expose-loader e aggiungere require('expose?$!expose?jQuery!jquery'); al punto di ingresso principale appena prima di richiedere webpack-bootstrap.

Ciò imposterà jQuery sulla finestra in modo che qualsiasi file possa ottenerlo. Fare attenzione a questo metodo, tutti i file avranno quindi accesso a quella versione di jQuery indipendentemente dal fatto che sia stata richiesta esplicitamente.