项目结构。存储库和文件夹。方法回顾。

文件夹结构

当我们迈出项目创建的第一步时，我们需要做出许多基础决策。其中之一就是项目结构。项目结构是基础。选择是否正确会影响到新功能的引入、支持、新员工的加入等等。

在本文中，我想回顾一下前端应用程序（尤其是基于 React 的应用程序）的结构方法。回顾基于 React 的示例很有意思，因为不同项目的文件夹结构和项目组织方式差异很大。

组织项目结构的方法有很多。有些开发人员对项目结构不够重视，文件之间缺乏逻辑关联。有些开发人员甚至把 JS 代码写在一个文件中。但代码的纯净性源于项目结构。我将分享我使用不同方法的经验，以及它们对团队和开发时间的影响等等。

当您定义项目结构并选择存储库方法时，您应该了解您的项目目标、大致的团队规模、业务发展路径等。

让我们从存储库开始我们的旅程。

绝大多数项目都是常规的 GIT 存储库。React 组件、网站、单页应用程序、后端 API，等等！

在常规代码库中工作通常注重速度。采用这种方法，团队由后端、前端、质量保证、业务分析师以及指定的产品负责人或项目经理组成。因此，团队完全独立且全面，但规模较小。

这种方法可以最大限度地减少代码拆分。例如，在创建网站时，项目可以分为两个代码库：SPA 和后端 API。或者将前端部分存储在服务器代码库中。这样，后续工作就无需担心版本控制问题了。

它是 GIT 仓库的集合。我们可以将 UI 移到一个单独的仓库中，并在多个应用程序、微服务、可复用部件等中使用。

这种方法非常适合大型项目，尤其适合构建包含众多应用程序的生态系统的项目。一旦我们选择这种方法，务必理解每个仓库必须拥有自己的命令。团队应该像一个成熟的单位，拥有自己的 QA、产品负责人等。

在多存储库方法中，版本控制和理解重大变更至关重要。您的团队各自负责系统的各个部分，并将系统的其他部分视为黑匣子。如果 UI 命令更改了组件的界面，那么许多依赖于这些更改的应用程序将停止工作。同时，使用版本控制，向新版本的过渡将更加顺畅。

值得考虑的是，使用多个存储库可以通过并行执行任务来加快开发过程，从而提高速度。同时，由于存储库的命令彼此独立，成本也会增加。由于更改可能会影响其他团队，因此主要版本之间的集成变得更加困难。

这是一个包含相关模块的存储库

这是一种逻辑分离和简单实现之间的平衡。像Babel和React-Router这样的大型项目都拥有 Mono 仓库系统。因此，添加新模块更加容易，无需过多担心向后兼容性，因为当前版本已作为基础，就像Monolith选项一样。

这种方法可以避免不必要的拉取请求。例如，您更新了 UI 库，需要在所有应用程序中更新此依赖项。在单一仓库 (monorepo) 方法中，您只需要一个 PR 即可完成此操作。在多仓库 (many repo) 方法中，您需要为所有需要更新依赖项的仓库创建一个 PR。

这种方法对于从事较大项目的小团队来说非常有用。

项目文件夹结构应该像地图一样直观，展示你拥有的内容和位置。我们将在 SPA React 应用程序中查看示例。

当你开发一个将要集成到应用程序中的 React 模块时，这种方法很合适。例如，你正在创建一个嵌入到网站中的聊天模块。在这种情况下，组成聊天模块的各个组件将是独立的，拥有各自的本地状态，并将被 index.jsx 文件用作生成的模块。

许多框架都提供了这种方法，例如 AngularJS、Angular 2+ 等。我在 React 和其他各种编程语言中经常遇到这种方法，尤其是在后端。

在大型应用程序中，文件夹的内容会变得一团糟。查找所需文件并确定依赖关系非常困难。

按功能分离通过将逻辑带入独立的单元（功能）来促进将业务逻辑与表示分离的想法。

在这个例子中，我们看到了 routes 文件夹，它对应于应用程序的路由并收集整个页面结构、组件和与功能的交互。

功能与视图分离。这是一组处理状态和回调的逻辑，这些逻辑将委托给路由上的组件。

可以在链接中找到此方法的示例

我特别想指出的是，随着React Hooks的出现，这种方法非常简洁地融入了应用程序的结构。上面的示例就使用了 Hooks。

几年前，我和一个朋友在做一个叫Cleverbrush的大项目。当时我们刚成立，资金不足，需要尽快发布一个可以投入生产的应用程序。

由于Cleverbrush项目包含多个应用程序（图形编辑器、照片拼贴、管理面板和登录页面），我们使用 Monorepo 方法将 UI、实用程序等通用部分合并到单独的包中。Monorepo 使我们能够在不同的存储库中更快地完成工作。

文件夹结构反映了将功能与视图分离的方法，与示例非常相似。

这使我们能够分离业务逻辑并将其委托给组件。

此外，我们必须从头开始开发许多组件，为此我们使用了选项分离为组件的文件夹结构。

因此，我们混合了不同的方法来获得最高的质量，并最大限度地缩短项目时间。

正如应用程序开发的所有方面一样，没有灵丹妙药，也没有唯一正确的方法。一切都取决于团队、项目、时间和资金。多尝试！与同事协商，因为项目结构会影响整个团队。祝您心情愉快，项目精彩！