将npm包与相同的devDependencies和peerDependencies链接在一起，使用webpack打破了开发中的应用程序

Question

我有以下情况：

前端的package.json

{
  "dependencies": {
     "lib" : "1.0.0",
     "foo" : "1.0.0"
  }
}

lib的package.json

{
  "devDependencies": {
     "foo" : "1.0.0"
  },
   peerDependencies": {
     "foo" : "1.0.0"
  }
}

当我使用webpack-dev-server开发一些前端时，我将模块foo与npm link链接到前端的这个依赖树：

├── [email protected]  
└─┬ [email protected]                
  └── [email protected]

而不是像这样的东西：

├── [email protected]  
└── [email protected]                

我已经发现webpack在我的foo的lib文件夹中找到了node_modules模块，因为我将这个包定义为devDependencies用于我的单元测试。现在我在捆绑的源代码中有两次包，导致一些错误。

问题：我如何强迫webpack或npm使用foo建议的lib中父亲（前端）的模块peerDependencies？

Answer 1

我假设你有前端和lib在两个不同的文件夹本地签出，并使用像cd frontend && npm link lib这样的东西将lib链接到前端。所以你的目标是同时在两个包上工作（在两个编辑器中更改代码），但也希望能够分别在前端和lib中运行编译器和单元测试。

答案是：你不能（那很容易）。这是因为首先将依赖关系首先解析为包的文件夹。这意味着，如果你在lib中安装了foo，它将始终选择lib：foo，而不是root：foo。

最简单的解决方案是根本不安装lib：foo，或者只删除它。它正在使用root：foo，如你所愿。但是，如果你使用npm link，它会首先安装所有lib的依赖项。

因此，对于前端的一次构建，您可以简单地删除该lib：foo包然后构建。但是，从lib包的角度来看，没有任何东西可以工作，因为它的依赖性被搞砸了。

更强大的解决方案是在root中安装lib，只安装不在peer / devDependencies中的foo的实际依赖项

为此，您可以在https://github.com/marcj/npm-local-development上使用npm-local-development

它基本上与npm link做同样的事情，但通过设置文件观察器并在后台自动同步文件更改来解决devDependency限制，不包括所有devDependencies / peerDependencies。

1. 你安装npm-local-development：npm i -g npm-local-development
2. 您在根包中创建名为.links.json的文件。
3. 您将每个包名称及其本地相对文件夹路径写入其中 {“@ shared / core”：“../../ my-library-repo/packages/core”}
4. 打开一个控制台并在该根包中运行npm-local-development。让它在后台运行。

免责声明：我是这个免费开源项目的作者。