Webpack using bootstrap - jquery не определен

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'); 

Пожалуйста, обратитесь к моей настройке. Некоторые из причин я получил ошибку говоря "Uncaught ReferenceError: Jquery не определен() от dropdown.js

Я также включил следующие строки на webpack.config.js

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

Но, нет удачи -.? Тем не менее имея JQuery неопределенную ошибку Любая идея Может кто-то помочь этому вопросу, пожалуйста,

Большое спасибо

Answer 1

пожалуйста, используйте WebPack ProviderPlugin, использовать глобальный не является хорошей идеей.

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

Answer 2

Это будет работать

?!

global.jQuery = require('jquery'); 

вместо

import $ from 'jquery'; 

Answer 3

global.jQuery не работает для меня. Но я нашел интересное здесь: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

Основная идея - использовать импорт-загрузчик webpacks. Обратите внимание, однако, что он не установлен по умолчанию, поэтому сначала установите (npm install --save import-loader). И в webpack.config добавить к вашим погрузчикам следующее:

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

После этого только импорта JQuery и загрузчике, или некоторые другие плагины, простирающихся на «JQuery», как обычно.

С уважением

Answer 4

Для того, чтобы этот код для работы вы должны RESTART Узел после изменения:

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

Answer 5

Как отметил @Ro не забудьте перезапустить сервер узла, изменения к В противном случае веб-пакет не будет учитываться.

Я подтверждаю, что после добавления этих строк и перезапуска сервера ошибка исчезнет.

С Bootstrap 4 обновленная версия webpack.config.js будет выглядеть на самом деле, как это из-за своей зависимости с Tether:

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

Answer 6

это будет работать

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

Он работал я надеюсь, что это поможет