Webpack с использованием начальной загрузки - 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 неопределенной ошибкой. Любая идея ? Может кто-нибудь помочь в этом вопросе, пожалуйста?

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

 zloctb12 сент. 2017 г., 13:48
github.com/AngularClass/angular-starter/issues/696 Murhaf, если хороший ответ

Ответы на вопрос(7)

http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

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

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

После этого просто импортируйте jquery и bootstrap или некоторые другие плагины, распространяющиеся на jQuery, как обычно.

С уважением

 aphexddb08 авг. 2016 г., 17:57
Можно подтвердить это работает с Bootstrap 3
 Sean the Bean17 февр. 2017 г., 20:21
Вы имели в виду ссылку на этот вопрос или что-то еще?
 Ramp11 янв. 2017 г., 22:19
Работает. Но мне пришлось установить для загрузчика значение import-loader окно' }
 Sergiu Dogotaru22 февр. 2017 г., 08:09
@ sean-the-bean определенно не хотел ссылаться на этот вопрос, спасибо за указание на это. Я отредактировал пост муравья, исправил ссылку.

Установить и использоватьэкспорт-погрузчик для отдельных импорта 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 с веб-пакетомответ ксюшаоБлог Бхавьяншу Парашера
Решение Вопроса

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

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};
 Marcel20 окт. 2016 г., 20:20
Благодарю. Просто спас меня от делwindow.jQuery = require('jquery')
 John24 нояб. 2017 г., 09:50
это работает, спасибо!
 Douglas Gaskell06 дек. 2017 г., 20:59
webpack 3, это не работает
 Michael14 июл. 2017 г., 16:35
Я просто не могу заставить это работать с VS.net 2017 и WebPack 2 ... даже перезапустил всю машину один раз, чтобы быть абсолютно уверенным, что узел перезапустился. У коллеги, работавшего с несвязанным прототипом Aurelia, точно такая же проблема была и в сравнении с 2017 годом и веб-пакетом 2, и это тоже не сработало для него, поэтому ему пришлось взломать его.
 Rohan12 нояб. 2016 г., 18:49
пытаясь найти больше информации об этом. любой хороший блог?
 Eric Burel17 февр. 2017 г., 09:41
он не загружает jquery везде? Есть ли способ настроить JQuery только при выполненииimport 'jquery' ?

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

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

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

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

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

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

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

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

Это сработало для меня, надеюсь, это помогает

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

global.jQuery = require('jquery');

вместо

import $ from 'jquery';
 Lamin Barrow18 дек. 2017 г., 12:50
Спасибо. Это сработало для меня после того, как я попробовал много других вещей в миксе Laravel.
 Taras Matsyk19 мая 2017 г., 15:02
гораздо лучше использовать ProvidePlugin
 mJay24 апр. 2017 г., 16:20
это единственный способ, с помощью которого jQuery работает как пользовательский интерфейс Kendo. Спасибо
 Dmitriy29 апр. 2017 г., 22:44
Не работал для меня Однако вышеприведенное сработало:stackoverflow.com/a/39283602/541961
 W.M.20 авг. 2016 г., 19:09
Большое спасибо @bhargavponnapalli Просто работает!
 Bhargav Ponnapalli19 мая 2017 г., 16:26
@Taras: Возможно, но тогда это работало для меня, и это продолжает помогать нескольким людям сегодня в особых случаях. :)
 russellmania13 янв. 2018 г., 02:59
Может ли Jquery BE быть сложнее для работы с веб-пакетом? Нет, не смог бы, если бы попытался. Мне приходилось работать над каждым решением на этой странице, пока я не добрался до этого.

Ваш ответ на вопрос