5分钟打造umi自定义模板把团队规范固化进脚手架【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi当你用umi create新建一个中后台项目时拿到的往往是官方默认模板干净的 React 骨架没有团队的 ESLint 规则也没有统一的目录约定。从老项目手动拷配置又费时又容易漏。umi 的create-umi模块提供了模板扩展机制让你把一个目录打成模板包一条命令生成项目并自动替换变量。 create-umi 模板机制是怎么工作的传入--template后create-umi 会先到 npm 仓库查询模板包的最新版下载对应的.tgz并解压到目标目录剥掉包根目录一层。内置模板则不走网络由BaseGenerator直接遍历目录以.tpl结尾的文件用Mustache模板引擎渲染变量其余文件原样复制。整个心智模型就是模板 静态目录 .tpl变量文件。 用 umi create 跑通第一个自定义模板最快的跑通方式是做一个最小模板并发布。整个模板包只需要package.json和一份带变量的package.json.tpl{ name: umijs/my-team-template, version: 1.0.0, files: [template] }template/目录下放你要生成的文件例如{ private: true, scripts: { dev: umi dev, build: umi build }, dependencies: { umi: {{{ version }}}, eslint: ^8.0.0 } }这里的{{{ version }}}是Mustache占位符渲染时会被替换成真实值。发布并生成npm publish # 发布模板到仓库 umi create my-app --template my-team # 名称会被归一化为 umijs/my-team-template运行成功会看到Init a new project with template umijs/my-team-template from npm ...和Init ... successcat my-app/package.json能看到已替换好的内容pnpm install pnpm dev即可看到本地页面。跑通之后接下来看它内部做了什么。自定义模板包的目录结构my-team-template/ ├── package.json # 模板包声明name 需为 umijs/自定义名-template └── template/ # 将被生成的项目内容对应 files 字段 ├── package.json.tpl # .tpl 结尾 → 渲染变量去掉后缀写入 ├── tsconfig.json.tpl └── pages/index.tsx # 无 .tpl 后缀 → 原样复制关键规则.tpl结尾的文件走模板渲染并去掉后缀package.json.tpl最终写成package.json其余文件原样复制目录遍历时会忽略node_modules。可以参考 packages/create-umi/templates/ 里的 app、max、vue-app、plugin 四套内置模板——官方模板本身就是普通的模板目录。关键逻辑模板下载与文件渲染外部模板的下载流程在 packages/create-umi/src/template.ts先请求registry/pkg/latest拿版本号再下载.tgz用strip: 1解压npm 包里的package/根目录内容直接落到项目根目录下载失败会清掉已创建的目标目录再报错。内置模板的渲染在 packages/utils/src/Generator/Generator.tscopyTpl执行Mustache.render(tpl, context)后写文件copyDirectory用 glob 遍历、对.tpl文件逐个渲染。context 里可用的变量有version、npmClient、registry、author、email、withHusky等都可以写进你的.tpl文件。umi create 参数与配置对照参数作用适用场景--template name使用外部模板名称归一化为umijs/name-template团队模板生成--default跳过全部交互问答使用内置默认值CI 里脚本化生成--no-install生成后不安装依赖想生成完再手动装--no-git跳过git init在已有仓库或 monorepo 内创建npm client 问答npm/pnpm/yarn 任选默认 pnpm按团队习惯registry 问答npm 或 taobaonpmmirror国内网络选 taobao还有两个细节值得注意目标目录若是 monorepo存在lerna.json或pnpm-workspace.yaml生成的.npmrc会被移到 monorepo 根目录、不装 husky、跳过git initpnpm 7 会往.npmrc写入strict-peer-dependenciesfalse来压制 peer 依赖告警。⚠️ 模板发布常见坑与调优包名对不上。现象Template umijs/my-team-template not found from registry。原因create-umi 只会按umijs/名称-template的组合去找包你发布的模板若是my-team-template没加 scope就匹配不到。解法模板包名必须写成umijs/xxx-template--template传xxx或完整名都可以。漏掉.tpl后缀。现象生成的项目里出现一个真名叫package.json.tpl的文件内容还是{{{ version }}}。原因没有.tpl后缀的文件按原样复制、不渲染。解法需要替换变量的文件一律以.tpl结尾另外 Mustache 的{{ }}会转义、{{{ }}}原样输出JSON 字段用后者避免转义问题。pnpm 安装后依赖是最低版本。现象创建完部分依赖偏旧、有 peer 告警。原因pnpm v8 默认安装符合区间的最低版本。解法create-umi 在 8.7 会自动执行pnpm up -L低版本 8.x 会打印提示你在项目里手动跑一次pnpm up -L即可。把模板推送到私有 npm 源、团队 registry 指过去之后每个人umi create --template一条命令就能拿到标准项目新人接入成本从半天配置降到一次命令。延伸资源packages/create-umi/src/交互问答、外部模板下载、monorepo 检测的主逻辑理解生成流程先看这里packages/utils/src/Generator/Generator.tsMustache 渲染与目录复制的实现想写自己的生成器逻辑时参考examples/ant-design-pro/基于 max 模板的完整中后台示例做团队模板时参考它包含什么docs/docs/官方文档umi create的完整命令说明在这里【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 5分钟打造umi自定义模板：把团队规范固化进脚手架
5分钟打造umi自定义模板把团队规范固化进脚手架【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi当你用umi create新建一个中后台项目时拿到的往往是官方默认模板干净的 React 骨架没有团队的 ESLint 规则也没有统一的目录约定。从老项目手动拷配置又费时又容易漏。umi 的create-umi模块提供了模板扩展机制让你把一个目录打成模板包一条命令生成项目并自动替换变量。 create-umi 模板机制是怎么工作的传入--template后create-umi 会先到 npm 仓库查询模板包的最新版下载对应的.tgz并解压到目标目录剥掉包根目录一层。内置模板则不走网络由BaseGenerator直接遍历目录以.tpl结尾的文件用Mustache模板引擎渲染变量其余文件原样复制。整个心智模型就是模板 静态目录 .tpl变量文件。 用 umi create 跑通第一个自定义模板最快的跑通方式是做一个最小模板并发布。整个模板包只需要package.json和一份带变量的package.json.tpl{ name: umijs/my-team-template, version: 1.0.0, files: [template] }template/目录下放你要生成的文件例如{ private: true, scripts: { dev: umi dev, build: umi build }, dependencies: { umi: {{{ version }}}, eslint: ^8.0.0 } }这里的{{{ version }}}是Mustache占位符渲染时会被替换成真实值。发布并生成npm publish # 发布模板到仓库 umi create my-app --template my-team # 名称会被归一化为 umijs/my-team-template运行成功会看到Init a new project with template umijs/my-team-template from npm ...和Init ... successcat my-app/package.json能看到已替换好的内容pnpm install pnpm dev即可看到本地页面。跑通之后接下来看它内部做了什么。自定义模板包的目录结构my-team-template/ ├── package.json # 模板包声明name 需为 umijs/自定义名-template └── template/ # 将被生成的项目内容对应 files 字段 ├── package.json.tpl # .tpl 结尾 → 渲染变量去掉后缀写入 ├── tsconfig.json.tpl └── pages/index.tsx # 无 .tpl 后缀 → 原样复制关键规则.tpl结尾的文件走模板渲染并去掉后缀package.json.tpl最终写成package.json其余文件原样复制目录遍历时会忽略node_modules。可以参考 packages/create-umi/templates/ 里的 app、max、vue-app、plugin 四套内置模板——官方模板本身就是普通的模板目录。关键逻辑模板下载与文件渲染外部模板的下载流程在 packages/create-umi/src/template.ts先请求registry/pkg/latest拿版本号再下载.tgz用strip: 1解压npm 包里的package/根目录内容直接落到项目根目录下载失败会清掉已创建的目标目录再报错。内置模板的渲染在 packages/utils/src/Generator/Generator.tscopyTpl执行Mustache.render(tpl, context)后写文件copyDirectory用 glob 遍历、对.tpl文件逐个渲染。context 里可用的变量有version、npmClient、registry、author、email、withHusky等都可以写进你的.tpl文件。umi create 参数与配置对照参数作用适用场景--template name使用外部模板名称归一化为umijs/name-template团队模板生成--default跳过全部交互问答使用内置默认值CI 里脚本化生成--no-install生成后不安装依赖想生成完再手动装--no-git跳过git init在已有仓库或 monorepo 内创建npm client 问答npm/pnpm/yarn 任选默认 pnpm按团队习惯registry 问答npm 或 taobaonpmmirror国内网络选 taobao还有两个细节值得注意目标目录若是 monorepo存在lerna.json或pnpm-workspace.yaml生成的.npmrc会被移到 monorepo 根目录、不装 husky、跳过git initpnpm 7 会往.npmrc写入strict-peer-dependenciesfalse来压制 peer 依赖告警。⚠️ 模板发布常见坑与调优包名对不上。现象Template umijs/my-team-template not found from registry。原因create-umi 只会按umijs/名称-template的组合去找包你发布的模板若是my-team-template没加 scope就匹配不到。解法模板包名必须写成umijs/xxx-template--template传xxx或完整名都可以。漏掉.tpl后缀。现象生成的项目里出现一个真名叫package.json.tpl的文件内容还是{{{ version }}}。原因没有.tpl后缀的文件按原样复制、不渲染。解法需要替换变量的文件一律以.tpl结尾另外 Mustache 的{{ }}会转义、{{{ }}}原样输出JSON 字段用后者避免转义问题。pnpm 安装后依赖是最低版本。现象创建完部分依赖偏旧、有 peer 告警。原因pnpm v8 默认安装符合区间的最低版本。解法create-umi 在 8.7 会自动执行pnpm up -L低版本 8.x 会打印提示你在项目里手动跑一次pnpm up -L即可。把模板推送到私有 npm 源、团队 registry 指过去之后每个人umi create --template一条命令就能拿到标准项目新人接入成本从半天配置降到一次命令。延伸资源packages/create-umi/src/交互问答、外部模板下载、monorepo 检测的主逻辑理解生成流程先看这里packages/utils/src/Generator/Generator.tsMustache 渲染与目录复制的实现想写自己的生成器逻辑时参考examples/ant-design-pro/基于 max 模板的完整中后台示例做团队模板时参考它包含什么docs/docs/官方文档umi create的完整命令说明在这里【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考