umi 自定义模板实战从 3 个文件到一条命令生成团队新项目【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiumi 自定义模板能把团队的项目骨架固化成一个模板包之后一条umi create命令就能生成符合规范的新项目。上个月组里第 5 个项目还在照抄上一次的配置——ESLint 规则手抄、请求封装复制、构建参数再对一遍每抄一遍就多一处漂移风险。这篇文章讲清楚模板机制的链路并把一个最小可用的 umi 脚手架模板从搭建到发布走完一遍。模板机制到底在做什么跑umi create my-app --template xxx时create-umi 做 4 件事解析参数并判断是否为外部模板按命名规则拼出模板包名到 registry 查该包最新版本的 tarball 地址下载 tarball 并解压到目标目录npm 包外层多一层package/解压时直接剥掉最后 git init 并安装依赖。核心逻辑 100 来行全在 template.ts链路如下umi create my-app --template xxx │ ▼ 拼模板包名 ──▶ 查 registry 拿 latest tarball 地址 │ ▼ 下载 解压到目标目录剥掉 package/ 外层 │ ▼ git init 安装依赖 ──▶ 可运行的新项目一句话外部模板路径是下载 原样解压解压之后不会再跑一遍变量渲染。这个细节后面会成为一个坑。从目录约定到可运行项目模板目录结构约定模板包就是把项目骨架当发布物包根目录对应新项目根目录npm 打包时自动排除 node_modulescreate-umi 解压时再剥掉package/外层。对照官方 app 模板最小骨架长这样my-team-template/ ├── package.json # 项目依赖配置 ├── tsconfig.json └── src/ ├── pages/index.tsx # 示例页面 └── layouts/ # 团队约定的布局文件变量替换与按类型生成内置模板的渲染由 BaseGenerator 负责收集参数或吃默认值后复制整个目录遇到.tpl结尾的文件用 Mustache 把{{{ var }}}换成上下文里的值例如 package.json.tpl 里的{{{ author }}}、{{{ version }}}new BaseGenerator({ path: ./template, // 模板目录 target: ./my-app, // 目标目录 data: { author, version: ^4.0.0 }, }).run();官方脚手架的按类型差异化生成是同一个思路index.ts 定义了 app / max / vue-app / plugin 四种模板类型按用户选择去 templates 对应子目录取骨架。团队模板可以照搬把中后台 / 门户两类差异做成两个子目录生成时按参数选一个。自定义 CLI 的入口实现如果模板还要带团队约定自定义命令、默认插件集参考 examples/cli-custom先定义一个 preset 挂上团队插件再用api.modifyAppData覆盖 CLI 名等项目元数据。模板项目保持标准 umi 工程约定全部收敛在插件里后续升级 umi 版本时不用动骨架。本地验证与分发本地联调与发布命令先检查进 tarball 的文件对不对再 link 到本地验证通过后发布npm pack # 先看会打进 tarball 哪些文件 npm link # 在模板仓库内注册本地包 umi create my-app --template my-team-template # 另一目录验证 npm publish --access restricted --registry 团队 npm 源--template的参数传包名去 scope 后的部分my-team、my-team-template、umijs/my-team-template三种写法都解析到同一个包template.ts 的 nameList 逻辑。生成的项目里 dev 能起、build 能过本地联调就算通过。发布为团队 npm 包发布渠道按团队约定选公开 npm 或私有源都可以团队成员之后只需umi create 项目名 --template my-team。注意官方实现默认只往umijs/scope 解析包名团队私有 scope 需要对应源或参数配合以仓库版本实际行为为准。发布流程细节可参考 CONTRIBUTING.md。容易踩的几个坑外部模板路径不做变量渲染--template只下载解压{{ projectName }}会原样留在生成的文件里.tpl后缀也不会被处理。解法模板里直接写死值项目名交给初始化后的改名步骤或用模板包里的 postinstall 脚本修补。依赖版本漂移package.json 里写^4.x时每个新项目都装到当时的最新版项目间行为开始漂移。解法模板里锁精确版本关键依赖加 overrides。跨平台路径模板脚本里出现\\分隔符或绝对路径Windows 和 macOS 必有一边挂。解法模板内脚本一律path.join。依赖没声明全npm 包不含 node_modules骨架用到的包必须写进 dependencies/devDependencies否则生成的项目一跑就缺包。进阶能力与官方素材交互式提问BaseGenerator 支持questions参数prompts 的答案会合并进渲染上下文官方脚手架问项目名、npm 客户端、源都走这套见 index.tsquestions: [ { type: confirm, name: withAntd, message: Use Ant Design? }, ]模板继承直接以 templates/app 为底加团队文件、改差异点不动的部分保持和官方一致降低新成员认知成本。条件渲染Mustache 的 section 语法{{#withX}}…{{/withX}}可按问答结果输出不同文件片段按勾选生成不同 request 实现这类需求一行解决。素材方面examples/ 目录有 30 多个真实示例SSR、qiankun、Vite 等写团队模板时可按需摘取脚手架使用文档在 boilerplate.md。一个 3 文件的骨架、一轮本地联调、1 次发布模板就从个人习惯变成团队资产。先按最小骨架跑通再往里加团队约定——顺序别反了。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
umi 自定义模板实战：从 3 个文件到一条命令生成团队新项目
umi 自定义模板实战从 3 个文件到一条命令生成团队新项目【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiumi 自定义模板能把团队的项目骨架固化成一个模板包之后一条umi create命令就能生成符合规范的新项目。上个月组里第 5 个项目还在照抄上一次的配置——ESLint 规则手抄、请求封装复制、构建参数再对一遍每抄一遍就多一处漂移风险。这篇文章讲清楚模板机制的链路并把一个最小可用的 umi 脚手架模板从搭建到发布走完一遍。模板机制到底在做什么跑umi create my-app --template xxx时create-umi 做 4 件事解析参数并判断是否为外部模板按命名规则拼出模板包名到 registry 查该包最新版本的 tarball 地址下载 tarball 并解压到目标目录npm 包外层多一层package/解压时直接剥掉最后 git init 并安装依赖。核心逻辑 100 来行全在 template.ts链路如下umi create my-app --template xxx │ ▼ 拼模板包名 ──▶ 查 registry 拿 latest tarball 地址 │ ▼ 下载 解压到目标目录剥掉 package/ 外层 │ ▼ git init 安装依赖 ──▶ 可运行的新项目一句话外部模板路径是下载 原样解压解压之后不会再跑一遍变量渲染。这个细节后面会成为一个坑。从目录约定到可运行项目模板目录结构约定模板包就是把项目骨架当发布物包根目录对应新项目根目录npm 打包时自动排除 node_modulescreate-umi 解压时再剥掉package/外层。对照官方 app 模板最小骨架长这样my-team-template/ ├── package.json # 项目依赖配置 ├── tsconfig.json └── src/ ├── pages/index.tsx # 示例页面 └── layouts/ # 团队约定的布局文件变量替换与按类型生成内置模板的渲染由 BaseGenerator 负责收集参数或吃默认值后复制整个目录遇到.tpl结尾的文件用 Mustache 把{{{ var }}}换成上下文里的值例如 package.json.tpl 里的{{{ author }}}、{{{ version }}}new BaseGenerator({ path: ./template, // 模板目录 target: ./my-app, // 目标目录 data: { author, version: ^4.0.0 }, }).run();官方脚手架的按类型差异化生成是同一个思路index.ts 定义了 app / max / vue-app / plugin 四种模板类型按用户选择去 templates 对应子目录取骨架。团队模板可以照搬把中后台 / 门户两类差异做成两个子目录生成时按参数选一个。自定义 CLI 的入口实现如果模板还要带团队约定自定义命令、默认插件集参考 examples/cli-custom先定义一个 preset 挂上团队插件再用api.modifyAppData覆盖 CLI 名等项目元数据。模板项目保持标准 umi 工程约定全部收敛在插件里后续升级 umi 版本时不用动骨架。本地验证与分发本地联调与发布命令先检查进 tarball 的文件对不对再 link 到本地验证通过后发布npm pack # 先看会打进 tarball 哪些文件 npm link # 在模板仓库内注册本地包 umi create my-app --template my-team-template # 另一目录验证 npm publish --access restricted --registry 团队 npm 源--template的参数传包名去 scope 后的部分my-team、my-team-template、umijs/my-team-template三种写法都解析到同一个包template.ts 的 nameList 逻辑。生成的项目里 dev 能起、build 能过本地联调就算通过。发布为团队 npm 包发布渠道按团队约定选公开 npm 或私有源都可以团队成员之后只需umi create 项目名 --template my-team。注意官方实现默认只往umijs/scope 解析包名团队私有 scope 需要对应源或参数配合以仓库版本实际行为为准。发布流程细节可参考 CONTRIBUTING.md。容易踩的几个坑外部模板路径不做变量渲染--template只下载解压{{ projectName }}会原样留在生成的文件里.tpl后缀也不会被处理。解法模板里直接写死值项目名交给初始化后的改名步骤或用模板包里的 postinstall 脚本修补。依赖版本漂移package.json 里写^4.x时每个新项目都装到当时的最新版项目间行为开始漂移。解法模板里锁精确版本关键依赖加 overrides。跨平台路径模板脚本里出现\\分隔符或绝对路径Windows 和 macOS 必有一边挂。解法模板内脚本一律path.join。依赖没声明全npm 包不含 node_modules骨架用到的包必须写进 dependencies/devDependencies否则生成的项目一跑就缺包。进阶能力与官方素材交互式提问BaseGenerator 支持questions参数prompts 的答案会合并进渲染上下文官方脚手架问项目名、npm 客户端、源都走这套见 index.tsquestions: [ { type: confirm, name: withAntd, message: Use Ant Design? }, ]模板继承直接以 templates/app 为底加团队文件、改差异点不动的部分保持和官方一致降低新成员认知成本。条件渲染Mustache 的 section 语法{{#withX}}…{{/withX}}可按问答结果输出不同文件片段按勾选生成不同 request 实现这类需求一行解决。素材方面examples/ 目录有 30 多个真实示例SSR、qiankun、Vite 等写团队模板时可按需摘取脚手架使用文档在 boilerplate.md。一个 3 文件的骨架、一轮本地联调、1 次发布模板就从个人习惯变成团队资产。先按最小骨架跑通再往里加团队约定——顺序别反了。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
