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

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

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

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

Это сработает!

 global.jQuery = require('jquery'); 

вместо

 import $ from 'jquery'; 

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», как обычно.

С уважением

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

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

Как уже упоминалось @Ro, не забудьте перезапустить сервер узлов, изменения в 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', }), ] 

Установите и используйте export-loader для отдельных импорта Dropdown с Bootstrap 4.0 и Webpack 3 .

 // webpack.config.js module.exports = { ... plugins: [ new webpack.ProvidePlugin({ Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", }) 

Плагин или индивидуальный импорт: require("./node_modules/bootstrap/js/dist/dropdown")

против

Импорт Bootstrap полностью: require("./node_modules/bootstrap")


Рекомендации

  • примечание Bootstrap 4.0 при импорте отдельных плагинов Bootstrap с webpack
  • Ответ на xushao
  • Блог Бхавианшу Парашера

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

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

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

  • Как создать несколько путей вывода в конфигурации Webpack
  • jQuery не определен в bootstrap-sass
  • Как отменить Angular 2 Cli ng-eject?
  • Когда следует использовать скобки с импортом
  • «Символ» не определен в IE после использования babel
  • Перемещение Webpack 4 CommonsChunkPlugin
  • Как я могу использовать ES6 в webpack.config.js?
  • Webpack ProvidePlugin vs externals?
  • Давайте будем гением компьютера.