如何使用Webpack 4仅在某些模块中导入jQuery？

Carlo 发表于 Dev

卡洛

我在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我得到一个错误，它没有定义

迪米特里斯·卡拉吉尼斯

好的，我很确定会发生以下情况：

您正在将jQuery dropdrop插件加载到依赖关系树中较高的位置，可能是其他软件包加载的。该插件希望在全局范围内找到jQuery对象，以便将其自身附加到该对象（因此，您可以访问该$().dropzone方法，请参见此处）。通过在dropzone插件尝试将其自身附加到jQuery对象时使用ProvidePlugin，没有问题

但是，由于您现在要删除ProvidePlugindropzone插件，因此它永远无法自行连接，因此没有$().dropzone可用的方法，因此会出现该错误

长话短说，只要您依赖假定jQuery在全局范围内加载的外部代码，就不能真正消除的使用webpack.ProvidePlugin，除非您当然直接修改那些依赖项的源代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。