Как импортировать jQuery только в определенные модули с Webpack 4?

Question

Я использую Webpack 4 в проекте Codeigniter. Большая часть моего кода Javascript все еще зависит от jQuery (установленного через npm), поэтому у меня есть такая конфигурация Webpack:

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

Это работает, но я планирую отказаться от jQuery или, по крайней мере, меньше зависеть от него, поэтому вместо глобального импорта я хотел бы импортировать его только в те модули, где это необходимо. Я попытался удалить вышеуказанный конфиг и добавил его в модуль:

import { $, jQuery } from 'jquery';
import Dropzone from 'dropzone';

При загрузке страницы я получаю эту ошибку в консоли:

myDropzone.js:95 Uncaught TypeError: Object(...) is not a function
at Object.<anonymous> (myDropzone.js:95)
at r (bootstrap:76)
at t (bootstrap:43)
at bootstrap:134
at bootstrap:134

Код, вызвавший ошибку:

$('.dropzone').each(function () {  // <--- this line
  $(this).dropzone(config);
});

В консоли я попытался проверить $ и jQuery, и первый работает нормально, но с jQuery я получаю сообщение о том, что оно не определено

Answer 1

Хорошо, я уверен, что произойдет следующее:

Вы загружаете плагин jQuery dropzone где-то высоко в дереве зависимостей, возможно, загруженный другим пакетом. Плагин ожидает найти объект jQuery в глобальной области видимости, чтобы присоединиться к нему (следовательно, предоставляя вам доступ к методу $().dropzone, см. здесь ). Используя ProvidePlugin, когда плагин dropzone пытается присоединиться к объекту jQuery, нет проблем

Однако, поскольку вы сейчас удаляете ProvidePlugin, плагину dropzone никогда не удается присоединиться, и поэтому нет способа $().dropzone, доступного для использования, поэтому вы получаете эту ошибку

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

Answer 2

Попробуйте использовать

import $ from 'jquery';
window.jQuery = $;
window.$ = $;