🎉 dumi 2,它来了它来了它来了

dumi 1.0 在 2020 年 3 月 2 日正式发布,到今日一共有 80+ 位 Contributor、提交 1100+ Commit、为近 4000 个开源项目供给了组件库/站点的文档计划;dumi 作为一个 GitHub 数亿开源项目中的藐小一粒,能有这么多人共同参与、能为这么多项目供给价值,无疑是十分幸运的。

与这份幸运一起到来的,还有许多体验问题的反馈、组件研制的考虑、实际项目的场景,加上社区的底层技术栈也在飞速迭代,是时分给 dumi 做一次大晋级了,所以咱们在本年的 7 月 29 日正式启动了 dumi 2.0 的研制,而在今日,它终于与咱们正式碰头了!

核心晋级

全新主题系统

先晒一下全新的默许主题,它也是主题系统的一部分:

 dumi 2,它来了它来了它来了

除了更精致以外,dumi 2 的主题系统还供给了如下才能。

主题支撑部分掩盖

在 dumi 1 里,想定制侧边栏就必须掩盖整个 Layout,本钱十分高; dumi 2 参阅 Docusaurus 的 Swizzing 规划、供给了 slots(UI 插槽)特性,只需求在项目里创立 .dumi/theme/slots/{SlotName} 就能完成对应 slot 的部分掩盖,而且供给哪些 slots 是由主题包决议的,在坚持开放性的一起、极大地降低了定制本钱。

自带国际化计划

在 dumi 1 里,主题包想做多语言,只能自行判断 locale 展示不同的案牍; dumi 2 约定主题包内的 locales/{lang-LOCALE}.json 文件为国际化案牍,会被结构主动加载,主题包组件只需求从 dumi 里导出 react-intl的相关 API,只需调用案牍 key 即可完成案牍的国际化。 不仅如此,案牍也是支撑 key 掩盖的,这意味着用户如果想定制主题包供给的案牍,只需求创立 .dumi/theme/locales{lang-LOCALE}.json 掩盖对应 key 的案牍即可。

支撑注册 dumi 插件

主题包或许伴随着默许装备、乃至是结构才能扩展,所以 dumi 2 约定主题包的 plugin.tsplugin/index.ts 为主题包的插件、会主动挂载,为主题包供给愈加强大的定制才能。

更多信息欢迎移步官方文档检查:主题-如何工作。

内置全文查找

静态站点的查找一直是老大难的问题,社区一般就两种计划:

  1. 传统的标题查找计划,由于生成 TOC 原本就需求收集标题,拿来做索引是顺理成章的,这也是 SSG 结构的常见做法,缺陷是能搜到的东西太少
  2. 接入三方的查找服务而且产出预烘托的 HTMLsitemap.xml,优点是能保证查找质量,缺陷是有必定门槛,例如 Algolia 就需求申请 AppKey

听起来都不完美,但 dumi 2 这次带来了第 3 种计划,既不需求接入三方服务、又能完成全文匹配、还不会导致产物尺寸增加,是真正开箱即用的全文查找计划!

查找的过程在 Service Worker 中进行,这意味着不需求忧虑查找结果匹配引发功用问题、也能够离线布置,一起 dumi 也供给了查找 API、可供主题包定制查找结果的出现。

约定式路由增强

dumi 1 被诟病最多的问题便是『路由生成难以操控』,装备完不跑一跑都不知道长什么样儿,所以 dumi 2 这次对约定式路由做了 3 大晋级。

装备简化

去掉 Markdown FrontMatter 中的 nav.pathgroup.path 装备项,终究路由便是文件路径,简单明了。

概念拆分

将路由分为『文档路由』和『财物路由』,文档路由通常放在 docs 目录下,会嵌套层级,而财物路由通常放在 src 下,不会嵌套层级、且默许归类在某一前缀(比方 /components)下,比方:

docs/guide/getting-started.md 会生成 /guide/getting-started
src/Foo/index.md 会生成 /components/foo

以上解析路径和财物路由前缀均可经过装备修正。

约定式 Tab

支撑以约定式的形式为 Markdown 内容增加 Tab,比方 index.$tab-key.md 就会作为 index.md 的 Tab 出现,能够帮助咱们更好地安排文档内容的出现:

 dumi 2,它来了它来了它来了

不仅如此,Tab 也支撑经过插件 API 注册,为更多功用的扩展供给了或许。

更好的编译功用

dumi 2 经过结合运用 Umi 4 MFSU、esbuild、SWC、耐久缓存等计划,带来比 dumi 1 更快的编译速度。

别的,dumi 2 也运用最新的 Unified.js 生态重写了整个 Markdown 编译逻辑,还供给了对 remark 和 rehype 插件的装备才能,在高功用的一起也愈加易于定制。

成为合格的 SSG

dumi 1 虽然本质上是 SSG(Static Site Generator),但实际上是反常偏科的,这次把本职工作牵强做合格:

  1. 支撑页面级的 TDK 装备,且内置 Helmet 可做深度自定义
  2. 内置 404 页面
  3. 默许静态化全部页面
  4. 支撑根据 React@18 Stream 的构建时预烘托
  5. ……

当然合格仍然是不行的,也期望咱们能一起参与完善,既然是『为组件研制而生的静态站点结构』,那就组件研制和静态站点都不能落下。

终于『有面儿』了

回想起当初 dumi 取名的过程,仍是觉得很神奇,一个代号能够是严寒的字母,也能够是有温度的昵称。

不过这么久以来,dumi 一直都借用的 Umi 的 LOGO,是时分趁着 2.0 的全新晋级,给这个有温度的昵称配上一张有温度的脸庞了:

 dumi 2,它来了它来了它来了

这便是 dumi 的 LOGO,用厚实的文档撑起精致的组件,请记住它的模样,如果是脸盲就不强求了 :D

除了以上核心晋级,dumi 2.0 还有十分多的细节改进,受限于篇幅就不再展开了,欢迎咱们在官网文档和实际运用中慢慢发现。

立即上手

如果是 dumi 1.x 的项目,请参阅晋级文档晋级到 dumi 2:d.umijs.org/guide/upgra… 如果是计划新建全新项目,请直接运用 create-dumi 脚手架:d.umijs.org/guide/initi…

后续规划

其实还有很多想做的功用没来得及做,dumi 2.0 发布以后还会持续新增功用,也期望能有更多的社区同学一起参与,这样 dumi 2.1 很快就会到来:

  • 移动端组件研制主题
  • Umi 4 项目集成形式
  • 交互式的 API 表格
  • 组件 Playground
  • Vue 组件烘托支撑
  • Monorepo 计划及最佳实践
  • ……

感谢

dumi 2 的发布离不开各位社区开发者的奉献,感谢你们让开源变得夸姣 :

  • PeachScript
  • wyy0521
  • miracles1919
  • xierenyuan
  • BoyYangzai
  • wangyi12358
  • sorrycc
  • mortalYoung
  • tangying1027
  • Dunqing
  • zhouzyc
  • yimingbot

Ant Design 5.0 在今日下午进行发布直播,其新官网也是运用 dumi 2.0 建立的

 dumi 2,它来了它来了它来了