为何jQuery实例不共享？简单赋值操作失效问题排查

调试import 'datatables.net'时发现它并未设置$.fn.dataTable，怀疑存在两份jquery副本。

为排查问题，在import factory from 'datatables.net'前添加了以下代码：

$.poop = 345
$.fn.somethingUnique = 123

随后在Webpack加载的jquery.dataTables.mjs文件中打断点，通过Chrome开发者工具监视发现：

• $.poop为undefined
• jQuery.poop符合预期被设置为345

但文件中存在代码let $ = jQuery;，按常理二者应该等价，为何会出现这种不一致？

核心原因就是项目中确实存在两份独立的jQuery实例：

• 你自己代码中使用的$，和jquery.dataTables.mjs模块内部的jQuery，属于两个完全独立的副本。
• 模块里的let $ = jQuery;只是把该模块内的jQuery引用赋值给了局部变量$，但这个jQuery是模块自身引入的副本，和你代码里的$（来自全局或另一个模块实例）毫无关系。

这种情况通常由Webpack的模块解析配置不当导致：

• 可能是全局引入的jQuery（比如通过<script>标签）和模块内导入的jQuery共存；
• 或是项目依赖中存在不同版本的jQuery，Webpack为版本差异打包了多个实例；
• 也可能是未配置全局共享jQuery，导致每个依赖jQuery的模块都单独引入了一份副本。

1. 在你的代码中添加打印：

console.log('全局$与window.jQuery是否一致:', $ === window.jQuery);

2. 在jquery.dataTables.mjs的断点处添加打印：

console.log('模块内jQuery与window.jQuery是否一致:', jQuery === window.jQuery);

如果两次打印结果不一致，即可确认存在多份jQuery副本。

3. 可选：使用webpack-bundle-analyzer分析打包产物，查看是否有多个jQuery chunk。

1. 统一jQuery版本：检查项目package.json，确保所有依赖的jQuery版本一致，避免版本差异导致重复打包。
2. 配置Webpack共享jQuery：使用ProvidePlugin全局提供$和jQuery，让所有模块共享同一个实例：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

3. 统一导入方式：避免混用全局<script>引入和ES模块import导入，确保所有代码都通过import $ from 'jquery'获取jQuery实例。
4. 检查依赖配置：确认datatables.net的peerDependencies中指定的jQuery版本已在项目中安装，避免它自动引入额外的jQuery副本。

内容的提问来源于stack exchange，提问作者mpen