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" }) ] 

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

  • Получение «Ошибка:« output.path »должен быть абсолютным путем или` / `
  • jquery-ui и webpack, как управлять им в модуль?
  • jQuery не определен в bootstrap-sass
  • Как добавить шрифт-awesome в проект Angular 2 + CLI
  • Как сообщить серверу webpack dev для обслуживания index.html для любого маршрута
  • Webpack style-loader vs css-loader
  • Нет заголовка «Access-Control-Allow-Origin» в приложении Angular 2
  • Webpack «Ошибка parsingа OTS» загрузка шрифтов
  • Interesting Posts

    Лучший способ хранения данных локально в .NET (C #)

    Как предотвратить Windows 8.1 при сборе окон на одном дисплее во время сна?

    Одновременное использование двух беспроводных сетевых адаптеров на настольном ПК Windows 10

    Создать UserID, даже если имена пользователей уникальны?

    разница между prop () и attr () в jQuery и когда использовать attr () и prop ()

    Сетевой прослушиватель Android

    Как Apple находит даты, время и адреса в электронных письмах?

    Почему люди говорят, что при использовании генератора случайных чисел существует модульное смещение?

    Angular2 – Параметры запроса HTTP-запроса

    Как извлечь CN из X509Certificate в Java?

    Bootstrap 4: Как сделать оставшуюся высоту строки?

    Как разбить строку, разделенную запятой?

    Как я могу рекурсивно скопировать файлы с расширением файла, сохраняя структуру каталогов?

    Преимущества, проблемы, примеры добавления другого UIWindow в приложение iOS?

    Как установить точку беспроводного доступа EDUP EP-2906?

    Давайте будем гением компьютера.