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

Question

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

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

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

我有一些担忧:

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

与导入单个 lodash 函数的方式类似(import forEach from 'node_modules/lodash/lib/...' 与 import { forEach } from 'lodash'，

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

我不想重复依赖项

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

<小时/>

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

Answer 1

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

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

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