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

Posted

技术标签:

【中文标题】在 monorepo 中的多个应用程序之间共享组件时如何处理共享依赖项【英文标题】:How to handle shared dependencies when sharing components between multiple applications in a 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 中安装它并在AppOneAppTwo 中使用别名来使用该软件包吗?

非常感谢任何建议!

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

以上是关于在 monorepo 中的多个应用程序之间共享组件时如何处理共享依赖项的主要内容,如果未能解决你的问题,请参考以下文章

如何在多个库之间共享上下文?

如何在同一个 monorepo 中的 Python 项目之间共享开发依赖项?

NestJs monorepo 共享库注入

如何在 Nx monorepo 中为 NestJS 和 Angular 之间共享的 API 接口启用 Swagger?

在 Ionic 应用程序中使用共享组件时生产构建失败

无法在纱线工作区 monorepo 中添加包