两个NPM包依赖同一包不同版本，如何指定各自使用对应版本？

场景描述 #

项目中引入了两个npm包（A和B），二者分别依赖第三方包C的不同版本。但同时调用A和B的初始化方法时，C的实际生效版本会被调用顺序覆盖，代码示例如下：

import { defineCustomElements as A } from '@A/A/dist/loader';
import { defineCustomElements as B } from '@B/B/dist/loader';

// 异常：调用A()和B()的顺序会决定最终使用哪个版本的C
A();
B();

问题 #

如何让A使用它所依赖的C版本，同时让B使用自身依赖的C版本？

已尝试操作 #

• 确认A和B确实依赖不同版本的C
• 搜索npm处理重复依赖版本的规则，但未找到有效解决方案
• 了解过npm别名，但不清楚在C随A、B一同引入的场景下如何使用

解决方案 #

1. 调整包的打包配置（适用于自主维护的A/B包） #

问题根源通常是A或B的打包产物将C的全局变量暴露到了全局环境，后执行的初始化会覆盖先执行的。如果A、B是你自己维护的包：

• 修改打包工具（Rollup/Webpack/Vite等）的配置，给包设置独立的作用域或命名空间：
  • 比如用Rollup的output.name指定专属命名空间，避免变量污染全局；
  • 用Webpack的output.library配置为UMD格式时，指定唯一的导出名称，确保各自的C版本在独立作用域内运行。
• 确保打包时将C打包为内部依赖（而非外部依赖），让A、B各自携带自己的C版本副本。

2. 使用npm别名+补丁工具（适用于第三方A/B包） #

如果A、B是第三方包，无法修改其源码：

1. 用npm别名在项目中同时安装C的两个版本：

   npm install c-a@npm:@C/C@x.x.x c-b@npm:@C/C@y.y.y
   

   其中x.x.x是A依赖的C版本，y.y.y是B依赖的C版本。
2. 安装patch-package生成补丁：

   npm install patch-package --save-dev
   

3. 找到node_modules/@A/A中导入C的代码，将import ... from '@C/C'改为import ... from 'c-a'；同理修改node_modules/@B/B中的导入路径为c-b。
4. 运行以下命令生成补丁，后续安装依赖时补丁会自动生效：

   npx patch-package @A/A @B/B
   

3. 配置模块解析别名（适用于构建工具项目） #

如果项目用Webpack/Rollup等构建工具，可以通过别名强制指定A、B加载各自node_modules中的C版本：

• Webpack配置示例：

  const path = require('path');
  
  module.exports = {
    resolve: {
      alias: {
        // 让A加载自己依赖的C版本
        '@A/A/node_modules/@C/C': path.resolve(__dirname, 'node_modules/@A/A/node_modules/@C/C'),
        // 让B加载自己依赖的C版本
        '@B/B/node_modules/@C/C': path.resolve(__dirname, 'node_modules/@B/B/node_modules/@C/C')
      }
    }
  };
  

• Rollup可使用rollup-plugin-alias插件实现类似配置。

4. 环境隔离（极端场景） #

如果上述方案都不适用，可考虑将A和B放在独立的执行环境中运行：

• 浏览器环境下用iframe或Web Worker分别加载A和B，让它们拥有独立的全局作用域，避免C版本冲突。
• Node.js环境下可使用vm模块创建隔离上下文，但这种方案复杂度较高，仅适合特殊场景。

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