时间戳

首页 > 解决方案 > 使用组件库时如何正确处理 PeerDependencies？

reactjs - 使用组件库时如何正确处理 PeerDependencies？

问题描述

首先，感谢您阅读并尝试理解这个问题。

在我的团队中，我们用React为常用组件构建了一个库大约 2 年多。这个库是用Babel构建的，创建了两种不同的转换。一个在 CommonJS 中供我们的 Test Runner 运行测试（因为 Jest 不能使用 ESM），另一个在 ESM 中用于 Create React App（Webpack inside）以使Tree Shaking 成为可能。我们使用Create React App来构建和开发我们的应用程序。

这对我们非常有用。但是我们在管理Final Form Peer Dependencies（或任何其他库）时遇到了问题。这是我们的场景：

我将解释这一点：

在我之前提到的通用组件库中，我们有与最终表单一起使用的 React 组件，例如我们在许多应用程序之间共享的维生素自动完成文本输入组件。此应用程序还使用最终表单创建组件，为该应用程序在本地实现表单。

所以 App1 是对的。一切正常。但一方面，现在如果我们想升级这个 App 的 Final Form 版本，因为，比如说，我们需要一个 Final Form 的错误修复。我们也被迫升级我们的通用组件库和其他应用程序的最终形式版本。如果我们想避免最终表单 React 上下文中的执行错误，我们需要这样做. 如果你一般熟悉 Final Form 或 React Context，你可能已经遇到过这个问题。您不能使用使用 React Context 的库的不同版本。即：如果我们的公共组件库中有 final-form@1.2.3 和 App1 中有 final-form@1.2.4，它将产生执行错误。所以正如我所说，我们不仅被迫升级 App1 和通用组件库，还被迫升级使用最终表单的库上的通用组件的其他应用程序。声明将是：'现在，如果我们在某个地方升级，我们必须在任何地方升级'。我们不想那样做。可能我们没有正确处理依赖关系。

所以这促使我们将 Final Form 依赖项（我们也使用 react-final-form、final-form-arrays 等）移动到PeerDependencies。我们的问题解决了。但是现在，当我们看到在 App3 之类的应用程序中使用 Create React App 构建 App3 时出现错误时，又出现了一个错误。这是我们使用时的输出npm run build：


module not found `react-final-form' in file 'node_modules/CommonComponentsLibrary/VitaminatedAutoCompleteTextInput.js'

这意味着，即使我们的应用程序在构建它对每个导入的检查时没有使用这个VitaminatedAutoCompleteTextInput，node_modules所以这使我们无法构建我们的 App3。当我们将“缺少的”依赖项添加到我们的应用程序时，这个构建没有问题，然后在分析我们的包时，source-map-explorer我们看到最终表单依赖项不包含在包中。

这是必要的吗？我觉得我们在这里遗漏了一些东西。对我们来说，一个解决方案是在通用组件库中包含最终表单依赖项作为“正常”依赖项，但我们仍然遇到我之前提到的第一个问题。

也许这个问题不仅仅与 Create React App 或 Final Form 有关。这可能是具有 Npm 依赖项的 ESModules 库中的一个更全球性的问题。可能你需要我来加强解释或有问题。我很乐意在需要的地方改进这个问题。我也在谷歌和这里搜索过类似的问题，但我只找到了这个。我不知道它是否是同一个问题，但它还没有答案。

非常感谢您尝试帮助或理解这个问题，

标签： reactjsnpmbabeljscreate-react-appfinal-form

解决方案

推荐阅读