如何使用Webpack 4僅在某些模塊中導入jQuery？

Question

我在Codeigniter項目中使用Webpack 4。 我的許多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

嘗試使用

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

Answer 2

好的，我很確定會發生以下情況：

您正在將jQuery dropdrop插件加載到依賴關系樹中較高的位置，可能是其他軟件包加載的。 該插件希望在全局范圍內找到jQuery對象，以便將自身附加到該對象（因此，您可以訪問$().dropzone方法，請參見此處 ）。 通過在dropzone插件嘗試將其自身附加到jQuery對象時使用ProvidePlugin，沒有問題

但是，由於您現在要刪除ProvidePlugin因此dropzone插件將永遠無法自行附加，因此沒有可用的$().dropzone方法，因此會出現該錯誤。

長話短說，只要您依賴假定jQuery在全局范圍內加載的外部代碼，就無法真正消除webpack.ProvidePlugin的使用，除非您當然直接修改這些依賴項的源代碼。