Webpack с использованием bootstrap - jquery не определен

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 undefined. Есть идеи? Может кто-нибудь помочь в этом вопросе?

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

Ответ 1

используйте webpack ProviderPlugin, используйте глобальный вариант не очень хорошо.

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

Ответ 2

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 и bootstrap или некоторые другие плагины, распространяющиеся на "jQuery", как обычно.

рассматривает

Ответ 3

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

global.jQuery = require('jquery');

вместо

import $ from 'jquery';

Ответ 4

Чтобы этот код работал, вы должны RESTART Node после изменения:

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

Ответ 5

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

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

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

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

Ответ 6

это будет работать плагинами: [new webpack.ProvidePlugin({$: "jquery", jQuery: "jquery" })]

Это помогло мне надеяться, что это поможет