使用 webpack 将具有相等 devDependencies 和 peerDependencies 的 npm 包链接到开发中会破坏应用程序

Question

我有以下情况：

前端的 package.json

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

库的 package.json

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

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

??? foo@1.0.0  
??? lib@1.0.0                
  ??? foo@1.0.0

而不是有这样的事情：

??? foo@1.0.0  
??? lib@1.0.0                

我已经发现在我的文件夹中webpack找到了模块，因为我定义了这个包作为我的单元测试。现在我在我的捆绑源中有两次这个包，这会导致一些错误。foolibnode_modulesdevDependencies

问题：我怎样才能像建议的那样强制 webpack或npm使用foo我的父母（前端）的模块？libpeerDependencies

Answer 1

我假设您已在两个不同的文件夹中本地签出前端和库，并使用类似cd frontend && npm link lib. 因此，您的目标是同时在两个包上工作（在两个编辑器中更改代码），但也希望能够分别在前端和库中运行编译器和单元测试。

答案是：你不能（就这么简单）。这是因为依赖关系总是首先解析到包的文件夹。这意味着，如果您在 lib 中安装了 foo，它将始终选择 lib:foo，而不是 root:foo。

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

因此，对于前端的一次性构建，您可以简单地删除该 lib:foo 包，然后构建。然而，从 lib 包的角度来看，由于它的依赖项被搞砸了，所以什么都不起作用。

更可靠的解决方案是在 root 中安装 lib，只安装 foo 的实际依赖项，这些依赖项不在 peer/devDependency 中

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

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

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在该根包中运行。让它在后台运行。

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