4 个环节搭好 umi 自定义模板让 umi create 一条命令生成团队标准项目【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi团队里新开一个项目很多人第一反应是打开那个最成熟的老项目删掉业务代码改个名字——路由、lint、请求封装、首屏页面每回都要重新摆一遍。umi 的脚手架 create-umi 虽然内置了 app、max、vue-app 几套官方模板但里面不会有你们团队的规矩。好在 umi 的模板机制是开放的把团队的项目骨架打成一个 umi 自定义模板发布到 npm之后umi create一条命令就能生成。流程拆成四个环节——搭目录结构、写生成逻辑、本地验证、发布给团队用每个结论都能在仓库源码里对上号。先看懂 umi 是怎么找到模板的机制清楚了后面每一步都不会摸黑。自定义模板本质上是一个装着团队项目骨架的 npm 包。命令行带上--template参数时packages/create-umi/src/template.ts 里的unpackTemplate函数接管先把名字规范成包名——传team-admin会自动补成umijs/team-admin-template——再去 npm registry 查这个包的最新版本下载 .tgz 直接解压到目标目录。所以模板的生成逻辑大半藏在包名规则和包内容里而不是某个神秘的配置。前提条件30 秒过一遍Node.js ≥ 14仓库package.json的 engines 里写的是14装好 umi 4create-umi随 umi 体系一起提供一个能发布 npm 包的环境公共源或公司私有 registry 都行环节一umi 模板目录怎么搭照抄官方简单模板 packages/create-umi/templates/app/ 的结构把自己的文件放进去就行team-admin-template/ ├── src/ │ ├── pages/ # 放团队通用页面 │ └── layouts/ # 全局布局 ├── config/ # umi 配置 └── package.json # 预先装好 umi、antd、lint 等依赖目录本身没什么玄机真正容易翻车的是两条约定包名必须以-template结尾--template传值没带umijs/前缀时源码会自动补上作用域。模板文件要直接放在包根目录。因为解压 tar 包时会剥掉一层源码里的strip: 1包内容再嵌套一层生成的项目就全错了。环节二生成逻辑怎么写分两档第一档可以到此为止。内容固定不用写代码。骨架文件原样放进包里打包即可这是最常用的用法。要按项目变量替换走官方的 .tpl 机制。入口是 packages/utils/src/BaseGenerator/BaseGenerator.ts 里的BaseGenerator给它模板目录路径、目标目录和一个 data 对象它会走copyDirectory遍历目录遇到.tpl结尾的文件用copyTpl渲染data 里的字段会作为模板上下文写进文件。create-umi 自己的四套官方模板就是靠 packages/create-umi/src/index.ts 里的injectInternalTemplateFiles调它跑出来的version、author、registry 都是替换进去的。最小用法const generator new BaseGenerator({ path: templates/team-admin, // 模板目录 target: my-app, // 目标目录 data: { version: ^4.7.0, author: 张三 }, }); await generator.run();一句话data 里定义了什么字段.tpl 文件里就能引用什么字段出来的就是实际值。环节三用 umi create --template 做本地验证先打包检查内容再发布、跑完整流程npm pack # 看一眼 .tgz 里装了什么 npm publish --access public umi create my-app --template team-adminumi create执行时会先交互问两件事选 npm 客户端npm/yarn/pnpm默认 pnpm和选 registry官方源或淘宝源然后下载、解压顺手把 git 初始化和依赖安装也做了。所有交互都是umijs/utils的clackPrompts实现的问哪些、默认值是什么看 packages/create-umi/src/index.ts 一目了然。环节四发布给团队用把包发到团队 registry公共 npm 源或公司私有源都可以。同事跑umi create my-app --template team-admin在提问时选对应源即可。注意源码永远拉的是最新版模板迭代就是发新版本的事谁都不用改配置。进阶三个常见增强交互式参数收集。BaseGenerator构造参数里有个questions传 prompts 标准问句数组即可答案会自动合并进渲染上下文。官方那个选哪套模板的提问就是这么做的参考 index.ts 里的 select 调用。条件渲染文件。在 .tpl 里写 EJS 条件分支或者干脆备两套内容不同的文件、由代码决定复制哪个。官方模板对 husky、pnpm 的 .npmrc 这类可选项就是靠 data 里的withHusky、extraNpmrc控制取舍的。包装自己的 CLI。不想用 umi create想有自己的命令看 examples/cli-custom/入口src/index.ts只有十来行就是拿自定义 preset 调 umi 的run({ presets: [...] })功能挂在src/features/下的插件里。延伸官方示例与文档入口官方模板packages/create-umi/templates/ 下共 4 套——app简单应用、maxAnt Design Pro 风格、vue-appVue、plugin插件脚手架读一套就能会搭一套。场景示例examples/下有 30 多个示例工程从 ant-design-pro 到 with-tailwindcss设计模板目录时照着挑。官方文档仓库docs/目录是文档入口create-umi 包自己的说明在packages/create-umi/的 README。下一步就能做今天就可以动手挑团队里最成熟的项目删掉业务代码只留骨架装进一个名叫umijs/your-team-template的包里发出去。下周起新项目的启动方式从摆一天变成一条命令。⚠️ 包名不符合umijs/*-template规范、或 registry 不通创建时日志里会报not found from ...——先查名字再查源。⚠️ 模板永远取 registry 上的最新版本地改完内容不发布新版本同事生成的结果不会变这是最常见的为什么没生效。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考