umi 自定义模板实战：5分钟生成团队标准项目，告别重复配置

umi 自定义模板实战：5分钟生成团队标准项目，告别重复配置

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi

上周组里新拉了个中后台，光对齐 ESLint 和 umi 配置就耗掉半小时，新人还得翻旧仓库当脚手架。把 umi 脚手架配上自定义模板（就是预先写好的项目骨架，生成新项目时照抄并注入变量），新项目第一天就是一条命令的事。本文带你走通全流程，读完动手约 15 分钟。

这个机制到底省了什么

说白了，模板机制是把"人对齐"变成"机器对齐"：

• 统一规范：ESLint、tsconfig、目录结构都从同一份模板长出来
• 消除重复：一条命令替代一堆复制粘贴再改名
• 沉淀最佳实践：模板每改一次，后续所有新项目自动受益

实现并不复杂。packages/create-umi/src/index.ts 负责收集参数、串联整个生成流程，真正渲染文件的是 packages/utils/src/BaseGenerator/BaseGenerator.ts，它只做一件事：把模板目录拷到目标位置，顺手替换变量。

环境先做个体检。

动手前的环境体检

• Node.js 14+，umi 4 官方支持的下限
• npm / yarn / pnpm 任一即可，pnpm 是官方推荐
• 本地已装 umi 4.x，跑一下umi create --help能出帮助页就没问题

🔍 想核对依赖怎么声明，可以直接看自定义 CLI 示例的 examples/cli-custom/package.json，核心就一个 umi 依赖，很轻。

环境没问题了，直接上手。

从骨架到跑通的完整路径

搭骨架：模板目录长什么样

一句话：把你希望新项目长成的样子，原样做成模板。

my-template/ ├── src/ │ ├── pages/ # 页面骨架 │ └── layouts/ # 布局骨架 ├── config/ # 构建配置骨架 ├── package.json.tpl # 依赖声明（带变量） └── tsconfig.json

带 .tpl 后缀的是可渲染文件（生成时替换变量，不是原样拷贝），其余文件原样拷过去。官方最小模板在packages/create-umi/templates/app/，照着它改就行。它生成出来的项目默认页面长这样：

最值得注意的细节：官方把 package.json 写成 package.json.tpl，因为版本号是生成时才注入的，不能写死。

接线：入口文件的核心逻辑

一句话：把模板目录和"变量表"交给渲染器，剩下的它来。

const generator = new BaseGenerator({ path: join(__dirname, '..', 'templates', appTemplate), // 模板目录 target, // 新项目落地目录 data: { version, npmClient, registry, author }, // 要注入的变量 }); await generator.run();

tpl 文件里用{{{ }}}引用变量，比如写"umi": "{{{ version }}}"，生成时就会被替换成真实版本号。最容易踩的坑：data 里传的变量名和 tpl 里用的必须一字不差，写错了文件里会原样留下一串{{{ }}}。

点火：本地验证与团队分发

一句话：本地跑通渲染，再打包成 npm 包让全团队一条命令使用。

# 1. 本地先验证：写个脚本调 BaseGenerator，渲染到临时目录 node render.js my-app # 2. 把模板目录打成 npm 包并发布 npm publish # 3. 团队成员直接用 umi create my-app --template my-team

--template传参后，create-umi 会把包名解析成@umijs/my-team-template再去注册表拉压缩包，所以包名必须遵循这个命名约定，拉不到包多半是名字没对齐。

进阶玩法：让模板更聪明

交互式收集参数。如果你需要让用户在创建时选"less 还是 tailwind"，传一个 questions 数组就行：

new BaseGenerator({ path, target, data, questions: [{ type: 'select', name: 'style', message: 'Pick a style solution', choices: ['less', 'tailwind'], }], });

用户的回答会自动并入渲染上下文，tpl 里可以直接引用。

模板继承。如果你想基于官方模板长出自己的内容，而不是从零开始，直接拷一份官方模板目录，把自己的文件和变量塞进去。官方模板本身只用了四五个变量，扩展成本很低。

条件文件过滤。如果你需要"用户勾了才生成 husky 配置"，在 tpl 里写 EJS 条件即可：

<% if (withHusky) { %> "husky": "^8.0.0" <% } %>

条件不满足时这段内容整行不会渲染，不会留下空配置。

社区资源速览

• 模板下载与包名解析实现：packages/create-umi/src/template.ts
• 自定义 CLI 完整示例（preset 加插件注册自定义命令）：examples/cli-custom/src/
• 官方中后台场景模板，结构完整可抄：packages/create-umi/templates/max/
• 官方入门文档（含--template参数说明）：docs/docs/docs/guides/getting-started.md

规范被模板锁住之后，新项目的成本就只剩一条命令。下次拉新项目，直接用你自己那版。

【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi