背景
当前使用 utoopack 启动 npm run dev 时,输出缺乏品牌感和设计感:
info - [plugin: .../utoopack] Using @utoo/pack@1.3.9
info - Umi v4.6.42
info - Preparing...
App listening at:
- Local: http://localhost:8000
- Network: http://30.172.96.210:8000
期望效果
简洁、有设计感。参考 Vite 的风格,无需 ASCII art,用排版和色彩说话:
utoo pack v1.3.9 ready in 1289ms
➜ Local: http://localhost:8000
➜ Network: http://30.172.96.210:8000
设计要点:
- 品牌名 + 版本 + 耗时在一行,用色彩区分(品牌名加粗/高亮,耗时用 dim)
➜ 箭头引导地址行,轻量不啰嗦
- 不画框,不加多余装饰,留白即设计
可选额外数据(空间允许时):
涉及代码
@umijs/bundler-utoopack/dist/index.js — getDevBanner() 函数(L231-239)
@umijs/preset-umi/dist/features/utoopack/utoopack.js — onStart hook 版本信息整合
@utoo/pack serve 流程 — 返回启动耗时
背景
当前使用 utoopack 启动
npm run dev时,输出缺乏品牌感和设计感:期望效果
简洁、有设计感。参考 Vite 的风格,无需 ASCII art,用排版和色彩说话:
设计要点:
➜箭头引导地址行,轻量不啰嗦可选额外数据(空间允许时):
涉及代码
@umijs/bundler-utoopack/dist/index.js—getDevBanner()函数(L231-239)@umijs/preset-umi/dist/features/utoopack/utoopack.js—onStarthook 版本信息整合@utoo/packserve 流程 — 返回启动耗时