umi 模板实战指南一个下午搭好可发布的 umi 自定义模板【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi 面向 umi 用户与团队负责人的项目脚手架定制实战用 umi 官方 create-umi 的模板机制把自己的标准工程结构打包发布成xxx-templatenpm 包从此新工程一条命令生成。照着本文做一个下午就能让团队告别复制粘贴式建项目。umi 模板机制长什么样先说结论umi 里的自定义模板不是一个独立系统就是一个 npm 包。packages/create-umi/src/template.ts里写得很直白——模板包名必须形如umijs/xxx-template带-template后缀umi create拿到包名后会去 registry 查 latest 版本、下载 tar 包、解压到目标目录。这意味着你的模板工程要满足两点能发布成 npm 包包名以-template结尾。除此之外模板文件里带.tpl后缀的文件官方packages/create-umi/templates/下每个模板都是这么写的会被当作 EJS 模板渲染里面的{{author}}、{{version}}等占位符会在生成时被替换成真实值。3 个文件撑起一个最小模板包最小可用的模板长这样一个完整的 umi 工程外加把需要参数化的文件改成.tplmy-team-template/ ├── package.json # 模板包自身配置name 以 -template 结尾 ├── src/ │ ├── pages/ │ └── layouts/ ├── package.json.tpl # 生成项目的 package.json含 {{xxx}} 占位符 └── tsconfig.json.tplpackage.json.tpl里写死团队的依赖清单只把项目名、作者这类因人而异的值留成占位符。骨架就这么大其余就是往里塞团队约定好的目录和配置。包打出来后发布到 registry团队侧的体验是一条命令umi create my-project --template umijs/my-team-templatepackages/create-umi/src/index.ts里的主流程会依次完成下载、解压、变量替换、git init和依赖安装——模板作者什么都不用额外做这些都是脚手架自带的能力。让模板学会问答静态模板解决有没有交互决定好不好用。想让生成时问用户要不要 antd、TypeScript并据此生成不同文件可以套用 umi 的插件机制。官方examples/cli-custom/目录里有一份能直接抄改的样例src下仅 3 个文件入口、preset、插件。入口只需注册一个自定义 presetimport { run } from umi; export const start async () { run({ presets: [require.resolve(./preset)], }); };preset 再指向具体插件。每个插件默认导出一个函数拿到api后用api.describe声明能力、用api.registerCommand注册自己的命令——examples/cli-custom/src/features/下的两个插件各十几行就是完整示例。在这个模式上追加交互问答clackPrompts这类工具做选择、多选都可以按用户勾选的结果决定拷贝哪套文件就是完整的问答式脚手架。验证、发布与交接发布前建议先本地过一遍跑一次umi create test-app --template 你的模板确认目录结构、占位符替换、依赖安装三件事都符合预期再加--default参数跳过全部交互走一遍无人值守路径这也是日后 CI 里验证模板改动最省事的办法。环境门槛不高Node.js 14umi 4.0npm install -g uminpm / yarn / pnpm 任选。发布到 npm registry 即可国内团队建议配合 npmmirror 源下载速度会快不少。交给团队后你只需维护两件事package.json.tpl里的依赖版本和模板包的新版本发布。模板升级后老命令一行不改生成出来的工程自动用上新的结构——umi create永远取 latest 版本。想抄作业的话packages/create-umi/templates/ 下有 app、max、vue-app、plugin 四套现成模板占位符写法和目录组织一目了然examples/目录里还有 30 多个不同技术栈的完整工程可以直接拿来做团队的模板底稿。 把你们团队的工程规范丢进一个xxx-template包下一个新工程就不用再有人手动配了。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考