在monorepo中的多个应用程序之间共享组件时，如何处理共享依赖关系

Question

我有以下monorepo结构

root
--AppOne
----package.json
----node_modules
------styled-components

--AppTwo
----package.json
----node_modules
------styled-components

--Shared
----componentA
----package.json
----node_modules
------styled-components

我的问题是AppOne和AppTwo都componentA在shared目录中使用a ，并且它取决于NPM软件包，例如styled-components

这意味着我需要styled-components在所有三个目录中进行安装，这会增加捆绑包的大小，如果版本不同，则可能会导致软件包执行应做的问题。

这也意味着我收到以下错误消息styled-components：

It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles not rendering properly, errors happening during rehydration process and makes your application bigger without a good reason.

我的问题是-解决这种情况的最佳方法是什么？理想情况下，我只希望将此软件包安装在一个地方。我应该在其中安装Shared别名AppOne并AppTwo在其中使用别名并使用该软件包吗？

任何建议，不胜感激！

Answer 1

我自己正在开发一个大型 monorepo，我会说有很多方法可以通过编写自定义脚本来解决这个问题，并在 npm“安装后”上触发它们。也许您还可以手动维护每个 package.json 的peerDependency 中的依赖关系之间的关系。

我更喜欢依靠工具来处理相互依赖关系管理。在我的项目中，我使用 Lerna，它具有专门针对此用例的包提升功能。如果 Lerna 对你来说太过分了，你应该知道Yarn Workspaces也提供了包提升。事实上，当 Lerna 在 Yarn 之上使用时，Lerna 只是将包提升委托给 Yarn 工作区，因此您实际上不需要 Lerna。

我在这方面也听说过Bolt，但截至 2019 年初，它非常有前途，但远不如 Yarn/Lerna 成熟。