如何根据可重用组件分离大型React代码库？

Question

我目前有一个庞大的通用反应应用程序。 我想从应用程序中提取一些组件并将它们放在一个单独的仓库中，以便其他团队/项目可以导入它们并在它们的前端使用它们。

例如：包含组件的存储库1

存储库2是一个可以从存储库1导入的Web应用程序

我有些担忧：

我想限制重复/未使用代码的数量

类似于如何导入单个lodash函数（从'node_modules / lodash / lib / ...'导入forEach从'lodash'导入{forEach}，

我希望组件能够独立导入，而不必捆绑所有组件

我不想复制依赖项

如果我的所有组件都是作为单个文件构建的，并且它们都需要React，那么我将React捆绑到我的代码库中的次数与我拥有的组件数量相同。

---

为我导出的每个组件都有一个单独的构建文件是一个好主意吗？ 如果我不导入构建的文件，我是否必须明确告诉我的主存储库中的webpack查看我的组件的node_modules？

Answer 1

据我所知，您的React组件现在位于项目的不同子文件夹中。 为什么不将它们移动到单独的Git存储库中并使用Git SubModules将这些存储库连接回您的应用程序？

您还可以制作React组件npm包并使用NPM安装它们。

每个使用组件的应用都需要将其包含在其构建链中。 我认为组件不应该真正构建自己。