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 dropzone插件，可能是由其他一些软件包加载的。该插件期望在全局范围内找到jQuery对象，以便将其自身附加到它（因此允许您访问$().dropzone方法，请参阅here）。通过在dropzone插件尝试将自身附加到jQuery对象时使用ProvidePlugin，没有问题

但是，由于您现在正在删除ProvidePlugin，因此dropzone插件永远不会自行附加，因此没有$().dropzone方法可供使用，因此您会收到该错误

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

如何在Webpack 4的某些模块中导入jQuery？

2 个答案: