Webpack mit bootstrap - jquery ist nicht definiert

Question

import $ from 'jquery'; 
require("./node_modules/bootstrap/dist/css/bootstrap.min.css") 
require("./node_modules/bootstrap/js/dropdown.js") 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
var _ = require('lodash'); 

Bitte beziehen Sie sich auf meine Einstellung. Einige Grund, warum ich habe Fehler sagen "Uncaught Reference: jQuery ist nicht definiert() von dropdown.js

Ich habe auch die folgenden Zeilen an webpack.config.js

plugins: [ 
    new webpack.NoErrorsPlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
] 

Aber nein Glück -.? jQuery undefiniert Fehler Treten immer noch Jede Idee Kann jemand dieses Problem helfen, bitte

Vielen dank

Answer 1

bitte webpack ProviderPlugin, verwenden Sie nicht eine gute Idee, global ist.

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

Answer 2

Diese Arbeit wird

?!

global.jQuery = require('jquery'); 

statt

import $ from 'jquery'; 

Answer 3

global.jQuery nicht für mich arbeiten. Aber ich fand eine interessante Lektüre hier: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

Die Grundidee ist es, webpacks 'importe-loader' zu verwenden. Beachten Sie jedoch, dass es nicht standardmäßig installiert ist, also zuerst installieren (npm install --save imports-loader). Und in webpack.config zu Ihrem Lader die hinzuzufügen folgende:

{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' } 

Danach nur Import jquery und Bootstrap, oder einige andere Plugins Verlängerung auf ‚jQuery‘, wie in der Regel.

Grüße

Answer 4

Damit dieser Code, den Sie arbeiten müssen NEUSTART Knoten nach der Änderung:

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

Answer 5

Wie @Ro erwähnt vergessen Sie nicht, den Knoten Server neu zu starten, um die Änderungen der Webpack wird sonst nicht berücksichtigt.

Ich bestätige, dass, sobald diese Zeilen hinzugefügt und der Server neu gestartet wurde, der Fehler verschwindet.

Mit Bootstrap 4 eine aktualisierte Version der webpack.config.js wird so aussehen eigentlich wegen seiner Abhängigkeit mit Tether:

plugins: [ 
// ...plugins... 
new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: 'jquery', 
    "window.jQuery": 'jquery', 
    tether: 'tether', 
    Tether: 'tether', 
    'window.Tether': 'tether', 
}), 
] 

Answer 6

dies funktionieren wird

plugins: [ 
    new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
    }) 
] 

Er arbeitete für ich hoffe es hilft