关于前端:有意义的前端应用程序文件夹结构

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器，ChatGPT4 已上线 https://cube.waixingyun.cn/home

对于大规模利用来说，最要害也最具挑战性的方面之一就是良好且正当的文件夹构造。在思考将代码库合成为应用微前端的多个利用之前，有一些步骤能够遵循，以在我的项目级别改良架构，并使过渡更加容易，如果你已经思考过这条门路的话。

指标是利用某种模块化，通过在性能之间设定边界并最小化代码耦合和副作用，使代码库更易于了解。

默认状况下，当应用某个风行的前端框架搭建新我的项目时，组件构造是平坦的，齐全不遵循任何层次结构。

咱们曾经粗浅体验到，对于大型项目来说，这种架构很快就会失控。咱们须要某种模块化，以便可能轻松定位特定文件，设定性能之间的边界，并防止组件之间的严密耦合。

任何大型应用程序都会被拆分为多个独立的性能。辨认它们并不总是容易和间接的，但随着工夫和教训的积攒，这个过程会变得更好。让咱们一起尝试将一个风行的应用程序合成为各个局部作为练习。

推特的主页内容丰富多彩。页面的外围局部是工夫线，四周围绕着许多性能，如导航、推文创立区域、带有多个子组件的侧边栏、浮动音讯组件等等。

将形成这些性能的所有组件放在同一个文件夹中是无奈保护的，即便应用 IDE 的疾速查找选项，要找到其中的一个也会十分艰难。

依据教训，一个更好且更全面的文件构造应该是这样的：

须要留神的三件重要事项：

Pages 文件夹自身就曾经在肯定水平上实现了模块化，无论是在上下文方面还是在像 webpack 或 Vite 这样的构建工具会创立的理论块方面。将所有页面放在一个中央十分有帮忙，然而它们外部的逻辑应该尽量简化。
为了更便于保护和扩大，咱们的指标是将大部分利用程序代码保留在 features 文件夹内。每个性能文件夹应蕴含给定性能的特定畛域代码。
在现实的世界里，咱们不应该有共享的组件、可组合的、存储和服务，所有的货色都应该在相应的个性文件夹内。可怜的是，在理论的我的项目中，这是无奈防止的，但咱们应该提前布局，并在向这些文件夹增加内容时分外小心

正如咱们之前提到的，咱们的应用程序的大部分应该存在于个性文件夹中，并宰割成多个子目录。

上述的 index.ts 文件作为每个性能的公共 API。当从另一个畛域导入某些内容时，应仅通过此文件进行。这应该能够避免循环依赖，并且也使得找到导入源更为容易。

# Bad 🚫 🚫 🚫
import {UserProfile} from '@/features/profile/components/UserProfile.vue'

# Good ✅ ✅ ✅
import {UserProfile} from '@/features/profile'

咱们能够通过应用 no-restricted-imports ESLint 规定来执行这种模式。

rules: {
    'no-restricted-imports': [
      'error',
      {patterns: ['@/features/*/*'],
      },
    ],
    'import/no-cycle': 'error',
    ...
}

以个性为导向的架构是组织简单我的项目的无效且通过实战测验的形式。它使咱们可能将代码解耦为独立的模块，并随着应用程序变得更简单而扩大。这将通过进步代码库的可预测性，缩小调试工夫并使新员工入职更容易，从而晋升开发体验。

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

默认我的项目构造