很多组件库乃至企业项目(此处仅止纯前端项目),但凡涉及到多项目工程构建、模板(库项目、页面项目)生成等流程,都会倾向于封装一套统一的构建、代码检查等流程工具以及项目中使用的脚手架,这样能在基础架构层面上减轻业务工程师的工作量,并且有助于统一多项目代码、流程规范(回想起当初写一个巨简单页面都要写一套 webpack + babel 配置的痛苦 😂)。

antd-tools 是 Antd 整个设计中的底层工具命令,阅读这部分代码无疑对整体代码架构的了解是锦上添花的。

输出命令

antd-tools 本身并没有提供生成脚手架的命令,只提供了组件构建流程中的一些工具命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// git
antd-tools run check-git // 检查当前是否有未提交的代码

// lint
deps-lint // 检查依赖的样式文件
ts-lint // 检查 ts 语法
ts-lint-fix // 尝试修复 ts 语法

// build
antd-tools run clean // 清除构建目录
tsc // ts -> js
watch-tsc // watch ts -> js 依赖 tsc
// 基于 webpack(配置文件:工程目录下的 webpack.config.js) 的打包
// 并基于 antd 的配置文件(.antd-tools.config.js 中的 dist: finalize 方法)
// 来自定义编译任务的最后一步,例如 antd-design
// 在结束编译后又在 dist/antd.less 中注入 less 依赖
antd-tools run dist
compile-with-es // compile to esm
compile-with-lib // compile to cjs
// 基于 antd 的配置文件(.antd-tools.config.js 中的 compile: finalize 方法)
// 来自定义编译任务的最后一步,例如 antd-design
// 在结束编译后又在 version/index.d.ts 中注入版本信息
compile-finalize
compile // 按顺序执行 compile-with-es、compile-with-lib、compile-finalize

// pub or deploy
package-diff // 与当前最新的 package 比较,一旦存在缺失文件,打印并提示是否忽略
update-self // npm update antd-tools
antd-tools run guard // 发布的时候 必须使用 --with-antd-tools
pub // 按顺序执行 check-git、compile、dist、package-diff

源码结构和解析

其实就是一个典型的 cli 项目,通过 commander 来获取输入参数,将输入的任务名传递给 gulp 执行。

核心代码:gulpfile.js