npm - 在 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目录，它依赖于一个 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“post-install”上触发它们。可能您也可以手动维护每个 package.json 的 peerDependencies 中的依赖关系之间的这种关系。

我更喜欢依靠工具来处理相互依赖管理。
在我的项目中，我使用具有 package hoisting feature 的 Lerna正是针对这个用例。
如果 Lerna 对你来说太过分了，你应该知道 Yarn Workspaces 也提供了包提升。 .事实上，当在 Yarn 上使用 Lerna 时，Lerna 只是将包提升委托(delegate)给 Yarn Workspaces，所以你真的不需要 Lerna。

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