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