1

在尝试使用styled-components.

出于本示例的目的，假设我们有两个存储库，app并且将由.corecoreapp

目前，core使用 TypeScript 编写并使用tsc.

为了快速迭代，我尝试使用yarn linkto 链接core到app.

这可以很好地进行app查找core...我面临的问题是，当编译的 TypeScript 代码core尝试需要一个包时，例如styled-components，它试图在node_modulesof core( not of app) 中找到这个包。由于我styled-components同时拥有 peerDependency 和 devDependency 它能够在core's中找到它node_modules，但这不是我想要发生的。我希望它使用styled-componentsof app。

yarn link我尝试过的一种替代方法是添加coreto appvia的依赖项file:/path。这似乎按预期工作，但引入了新问题。我怎样才能让我的开发机器的路径存在于package.json本地开发中（而不是不断地来回切换）？此外，似乎任何更新都core需要从 中删除包app，并在重新添加之前清除 yarn 的缓存。

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

4

3 回答 3

2

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

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

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

于 2021-05-24T16:14:45.180 回答
1

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

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

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

应用程序/配置/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

于 2021-03-06T06:32:56.707 回答
0

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

为了克服这个问题，告诉 typescript 解决消费者node_modules中有问题的包，tsconfig.json > compilerOptions > paths如下所示：

    "paths": {
      "rxjs/*": ["node_modules/rxjs/*"],
    }

另外，请参阅这篇文章了解更多信息。

于 2019-06-25T11:36:01.107 回答