umi源码探索：官方文档分析篇

相信使用 umi 的同学一定对 umi 的官方文档不陌生了。今天在查阅 umi 官方文档发现一个 bug，搜索 lay 会有多余展示。乘着修 bug 的功夫看一下 umi 官方文档在源码是怎么构建的。

前言

相信使用 umi 的同学一定对 umi 的官方文档不陌生了。今天在查阅 umi 官方文档发现一个 bug，搜索 lay 会有多余展示。乘着修 bug 的功夫看一下 umi 官方文档在源码是怎么构建的。

源码构成

umi 官方文档是以 umi 为基础，@umijs/plugin-docs 为扩展进行的构建的网站。@umijs/plugin-docs 为核心，主要增加了 markdown 读取的能力。

源码涉及文件及备注

1. types.d.ts：docs 的类型导出。
2. theme.config.ts：docs 的主题。
3. global.ts：docs 的全局 ts。
4. .umirc.ts：docs 的 umi 配置。
5. docs 目录：文档内容和主页
   1. blog：blog 页面的 markdown 文件
   2. docs：docs 页面的 markdown 文件
   3. components/SectionHeader：页面公共信息
   4. components：主页相关组件
   5. locales：国际化
   6. README.md：主页
6. packages/plugin-docs 目录：文档插件
   1. client：主题相关
   2. complied：预打包的文件
   3. src
      1. index.ts：插件逻辑
      2. compiler.ts：mdx 载入
      3. loader.ts：mdx 载入
      4. markdown.ts：解析标题

这应该是很简单的 umi 配置，熟悉 umi 的朋友应该知道 umi 项目的页面在 src 中的 pages 里面，然而这里并没有这样的目录，它是怎么运行起来的呢？这一切都要归功于@umijs/plugin-docs 插件。那么接下来让我们看一看这个插件是怎么写的。

@umijs/plugin-docs 插件逻辑

1. 处理国际化文件，将文件转换成字段。
2. 使用 modifyDefaultConfig 钩子修改默认配置
   1. 约定式路由相关配置：增加 docs 路径（把 docs 路径作为约定路由的基础路径，默认是 pages）
   2. 增加 mdx 配置（支持了读取 markdown 文件为组件）
3. 使用 addLayouts 钩子添加全局 layout 组件。
4. 使用 onPatchRoute 钩子，给路由打补丁。因为约定式路由是基于文件和文件名生成的，这里修改了不同语言的路径形式。
   1. 放在 docs/xxx.zh-CN.md 的文档，会被映射到 /zh-CN/docs/xxx 目录
   2. 放在 docs/xxx/README.zh-CN.md 格式结尾的文档，会被映射到 /zh-CN/docs 目录
5. 使用 modifyRoutes 钩子，修改路由。增加对应语言的路由
6. 使用 onGenerateFiles 钩子生成.umi 临时文件处理
   1. 修改 index、Layout 文件

总结

总得来说@umijs/plugin-docs 插件通过配置 mdx、conventionRoutes 属性来实现 umi 文档的。