umi源码探索:源码结构分析篇

779 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

前言

早在 2019 年我就学习过一次 umi 源码,2022 年了,距离 umi4.0.0 发布已经过去了一个半月。作为一个活跃贡献者,不熟悉源码怎么行。这个系列将以一个前端小白视角来学习 umi 源码。

开始

现在是 2022 年 08 月 05 日,使用的是当前最新的代码版本v4.0.11,你也可以点击连接下载源码的 zip 文件对照着和文章一起看。

解压出源码文件,我们应该怎么看源码呢?看到这么多文件脑子里一定充满了问号?这个是啥那个是啥,应该从哪儿里看起呢?我当年是从 package.json 看起的,主要看里面有哪儿些依赖,然后到npm 官网查询这些依赖都起了什么作用,依赖查完你基本就能了解源码第一级目录的文件都起到什么作用。当然你也可以哪儿里不懂问谷歌,按文件名去搜索这个文件有什么作用。

iShot2022-08-05 17.18.18.png

基于目录结构分类

iShot2022-08-05 17.23.38.png

这是我基于对目录分析对第一级目录的一个分类,也是我后面分块阅读的一个指引吧。

  1. packages:这个文件夹放的是 umi 框架相关的各种包。
  2. codemod:这个文件夹是做 umi3 升级到 umi4 的代码转换。
  3. script:这个文件夹放一些项目内会用到到的一些脚本。
  4. example:这个文件夹用来测试项目内的一些功能的例子集合。
  5. docs:这个文件夹放 umi 官方网站相关的文件。
  6. 其他:除了上面 5 个文件夹。

今天看下其他这一块包含了哪儿些。

github 相关

这一块涉及到的文件夹:.github,文件:codecov.yml

issues 模板

平时我们给 umi 提交 issues,会有 1 个需求模板、1 个 bug 模板、1 个讨论连接,如下图:

iShot2022-08-05 17.56.03.png 在项目中.github/ISSUE_TEMPLATE里可以找到相关的配置。

github workflows

github 的一个持续继承服务,umi 主要用来做 PR 持续继承(代码质量检测)【图左上角】、PR 压缩大小检测【图右上角】、覆盖率检测【图右下角】、e2e 测试【图左上角】、发布后机器人自动添加点赞图标(方便关注的人点赞)【图左下角】。

iShot2022-08-05 19.01.00.png

风格和规范

这一块涉及到文件夹:.husky,文件:.prettierrc、.prettierignore、.editorconfig、

  1. husky + lint-staged + prettier + scripts/verifyCommit.ts来做提交校验和自动格式化。
  2. editorconfig:不同编辑器风格统一。

其他

这一块涉及到目录:test,文件:.fatherrc.base.ts、turbo.json、package.json、pnpm-workspace.yaml、pnpm-lock.yaml、lerna.json、jest.turbo.config.ts、jest.e2e.config.ts、jest.config.ts、tsconfig.base.json、tsconfig.json

  1. 包管理:pnpm 进行多包管理,lerna 用来辅助发包选择版本。
  2. 打包构建:father(cjs 打包构建)、turbo(增加缓存,加速打包)
  3. 测试:jest

还没聊到的文件

  1. types.d.ts:docs 的类型导出。
  2. theme.config.ts:docs 的主题。
  3. global.ts:docs 的全局 ts。
  4. .umirc.ts:docs 的 umi 配置。
  5. README.md:你在 github 上 umi 主页看到的就是它。
  6. LICENSE:开源协议。
  7. CONTRIBUTING.md:贡献文档。
  8. .npmrc:npm 的配置。
  9. .gitignore:git 排除。
  10. .gitattributes:.gitattributes 文件允许你指定当执行 git commit 等 git 动作时,应该被 git 使用的文件和路径的属性(attributes)。

结语

在调试项目的时候和以前的 umi 对比的感受就是更快了。装包变快了(pnpm 会有缓存)、构建变快了(turbo 缓存构建过的包,不进行重复构建)。