Question

尝试使用styled-components开发React组件库时遇到以下问题。

在此示例中，假设我们有两个存储库app和core，并且core将由app消耗。

当前，core用TypeScript编写，并使用tsc构建。

为了快速进行迭代，我尝试使用yarn link将core链接到app。

这对于让app找到core来说是个好方法……我面临的问题是，core的已编译TypeScript代码尝试需要一个软件包，例如{{1 }}，它会尝试在styled-components的{{1}}（node_modules的 not ）中找到此包。由于我同时拥有core作为peerDependency和devDependency，因此可以在app的{{1}}中找到它，但这不是我想要的。我希望它使用styled-components中的core。

我尝试过的node_modules的一种替代方法是通过styled-components将app的依赖项添加到yarn link中。这似乎按预期工作，但引入了新问题。我该如何在core中使用我的dev机器进行本地开发（而不会不断地来回切换）呢？另外，似乎在app中进行的任何更新都要求从file:/path中删除该软件包，并在重新添加之前清除yarn的缓存。

有没有更简单的方法可以使此方案起作用？我刚刚开始将Rollup或Webpack视为解决方案，但是不确定这是否是正确的方向。

Answer 1

我们需要在核心 repo 的 devDependencies 中使用 styled-component 库，因为它需要在核心 repo 中开发可重用的组件。

同时我们需要告诉app repo从app repo的node_modules加载核心repo的peerDependencies。

我们可以使用 webpack，例如，如果我们使用 react-scripts 生成应用程序仓库，我们可以运行 yarn eject 并在 config 文件夹中找到 webpack.config.js 并可以更改 resolve.alias 部分。

app/config/webpack.config.js

{
  ...
  resolve: {
    ...
    alias: {
      ...
      core: path.resolve("./node_modules/core") // path must be imported above.
    }  
  }
}

欲知更多详情：https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link

Answer 2

正如您所说，打字稿正在“错误地”解决这些问题。

要解决此问题，请像这样告诉打字稿来解决消费者在node_modules的{{1}}中存在问题的软件包：

tsconfig.json > compilerOptions > paths

另外，请参见this post。

Answer 3

这不是纱线链接的解决方案。

但是对于使用 yarn 和 npm 管理本地存储库有问题的任何人的解决方案

只需使用 yalc 来管理您的本地包而不是 yarn link 或 yarn add link:...

使用yarn链接消耗具有peerDependencies的本地npm软件包时出现问题

3 个答案: