在 monorepo 中的多个应用程序之间共享组件时如何处理共享依赖项答案

【问题标题】：How to handle shared dependencies when sharing components between multiple applications in a monorepo在 monorepo 中的多个应用程序之间共享组件时如何处理共享依赖项
【发布时间】：2019-07-14 02:20:20
【问题描述】：

我有以下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 都在使用来自 shared 目录的 componentA，它依赖于 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 中使用别名来使用该软件包吗？

非常感谢任何建议！

【问题讨论】：

标签： npm webpack node-modules webpack-4 styled-components

【解决方案1】：

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

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

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

【讨论】：