Как использовать плагины jQuery plus и зависимые библиотеки с Webpack

Я пытаюсь понять, как перенести существующий набор кода в Webpack. Вот мой сценарий:

Я использую jQuery с Bootstrap, KendoUI, Mockjax, некоторыми библиотеками подключаемых модулей jQuery (например, bootbox, jQuery BlockUI). Ранее (используя requireJS) я мог указывать эти зависимости в массиве в 'require' моего основного приложения js, и все было хорошо связано. Как это:

require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

Используя Webpack, я столкнулся с рядом проблем:

  • Когда я включаю функцию чанкинга, мои фиктивные конечные точки больше не работают

  • В одном случае Webpack создает файл 0.js, и я понятия не имею, почему и как это предотвратить.

  • В разных случаях кажется, что есть две (?) Копии jQuery, так что обработчики или ссылки на виджеты Kendo больше не работают

  • Когда я попытался преобразовать некоторый код-обертку из стиля AMD (с массивом 'require', за которым следует функция с формальными параметрами), я получил множество ошибок, таких как Bootstrap не находит jQuery или все, что появляется при загрузке, кроме события jQuery. слушатели работали.

Я прочитал кучу статей и пробовал такие вещи, как:

  • с использованием webpack.ProvidePlugin в моем конфиге Webpack

  • поместив "псевдоним" в unminified jQuery в resolve объект моего конфига Webpack

  • с использованием imports-loader?jQuery=jquery,$=jquery,this=>window подход в моем module: { loaders: {}} Конфигурационный объект Webpack

  • с использованием imports-loader подход в моей главной JS в require

Пока что ничего не сработало полностью. Я подошел близко, только чтобы обнаружить (например), что внезапно виджет Kendo, кажется, не существует под выбором jQuery, над которым он ранее работал.

Резюме:

Я хотел бы понять, как сделать пуленепробиваемую настройку так, чтобы существовал один-единственный экземпляр jQuery, и все, что имеет jQuery в качестве зависимости / отношения, использует этот экземпляр везде в моем коде. Кроме того, я хотел бы понять, как этого можно добиться, используя функцию "пакетирования" в Webpack. Если я разделяю мои конечные точки Mockjax (например) в отдельный файл, я хочу, чтобы они работали для любого вызова AJAX в любом месте, будь то через Kendo или jQuery. Если я определю где-нибудь виджет Kendo (скажем, выпадающий список), я хочу иметь возможность получить к нему доступ из любого места, используя $('.some-kendo-widget').data('kendoDropDownList) подход.

Я рад прочитать больше статей, если у кого-то есть ссылки; Я искал и искал, и, похоже, у меня просто нет слов, чтобы найти то, что мне нужно. Конечно, кто-то еще сталкивался с этим, хотя.

Источник

1 ответ

Для устаревших библиотек, таких как jQuery UI, которые используют глобальный jQuery, нам пришлось использовать ProvidePlugin:

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}),

Но я просто хватаюсь за соломинку здесь, удачи!

Источник
Другие вопросы по тегам