npm 引用同一个 包 模块 的不同版本的 行为

https://zhuanlan.zhihu.com/p/139492167

 

上周吃饭时，大家聊到一个问题。比如我的项目trade，依赖了A@1.0.0版本。 然后我又引入了B，而B依赖A@2.0.0版本，这时候会产生冲突吗？

都知道不会有冲突，因为这种场景太常见了。不过具体是如何做到的，并没有去了解过。

今天正好有空，就写了个demo看看

首先建立好项目trade，然后安装 A@1.0.0，执行npm ls -depth=1

trade
└─ A@1.0.0

然后弄个npm包B，让它依赖A@2.0.0，项目trade安装B之后，执行npm ls -depth=1

trade
├─ A@1.0.0
└┬ B
  └─ A@2.0.0

到这里，node_modules中包的下载安装部分，就很清楚的知道了多版本存放的策略。

---

然后就是项目构建时，webpack生成bundle，打包的策略了。

webpack基本流程就是找到代码中各种模块引入语句（require()、import、url()等），然后确定模块依赖关系，最后把模块打包到一起去。

这里，会想说，项目trade中，引入A模块的代码是

// trade项目
import 'A' // 1.0.0版本的A

模块B中，引入A模块的代码，也是

// 模块B
import 'A' // 2.0.0版本的A

那么，这两个A，webpack是怎么知道具体打包哪个版本，不会搞错呢。

通过看打包好的代码和文档，发现是这么做的

首先对于这种直接书写模块名的引用，webpack查找模块的方式和node一致，都是先找当前目录的node_modules中是否有这个模块，然后再找上一级目录的node_modules，一直找到根目录。这么做，就能保证webpack能顺利找到模块了。

然后是模块打包的过程，虽然在我们写代码时，import的模块都叫做A，但是webpack内部，是把模块的路径当做模块的id标识来区分的，所以就不会找错了

// webpack模块的管理
{
  "./node_modules/A/index.min.js": function() {},
  "./node_modules/B/node_modules/A/index.min.js": function() {}
)