Umi 脚手架实战指南用pnpm create umi一键初始化 React 项目【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi本篇技术指南围绕 Umi 官方脚手架create-umi展开讲解如何通过pnpm create umi命令在向导引导下快速创建标准 Umi 项目、选择 Npm 客户端与镜像源、理解生成后的目录结构并结合仓库源码packages/create-umi剖析脚手架背后的交互流程、模板注入与依赖安装原理帮助读者从会用进阶到懂原理。一、脚手架是什么一条命令完成项目初始化Umi 官方提供了一个脚手架create-umi用于快速生成标准化的 Umi 项目骨架。你只需要一条命令向导就会自动完成选目录 → 选模板 → 选包管理器 → 选镜像源 → 生成文件 → 安装依赖 → 初始化 Git的全流程。# 直接运行向导会提示你输入目标文件夹名称 pnpm create umi # 一步到位在当前目录的 my-umi-app 文件夹下创建项目 pnpm create umi my-umi-app从源码实现看pnpm create umi实际执行的是create-umi包packages/create-umi/package.json 中bin字段指向bin/create-umi.js。CLI 入口packages/create-umi/src/cli.ts解析命令行参数后调用核心生成器 packages/create-umi/src/index.ts最终把参数注入模板文件并渲染到目标目录。运行后脚手架会依次询问两类问题下面逐一说明。二、向导选项一Pick Npm Client选择 Npm 客户端你可以从以下 5 个选项中挑选习惯的 Node 依赖管理工具客户端说明npmNode 官方自带包管理器cnpm淘宝定制的 npm 客户端主要面向国内网络环境tnpm阿里巴巴内部的 npm 客户端yarn经典的 JS 包管理器Yarn Classicpnpm高效、节省磁盘空间的包管理器Umi 官方推荐源码中对应枚举定义packages/create-umi/src/index.tsenum ENpmClient { npm npm, cnpm cnpm, tnpm tnpm, yarn yarn, pnpm pnpm, }值得注意的工程细节当选择pnpm时脚手架会先探测本地 pnpm 版本getPnpmVersion若主版本为 7且介于 7.0.0 与 7.13.5 之间会在生成的.npmrc中写入strict-peer-dependenciesfalse以抑制 pnpm v7 的 peer 依赖告警若主版本为 8 且版本号低于 8.7.0由于 pnpm v8 默认按最小版本解析依赖脚手架会改用pnpm up -LinstallAndUpdateWithPnpm把所有依赖升级到最新版避免生成一个依赖过旧的锁文件若未安装 pnpm脚手架会直接报错提示Please install pnpm first。三、向导选项二Pick Npm Registry选择 Npm 源镜像源说明npm官方源https://registry.npmjs.com/taobao淘宝镜像源https://registry.npmmirror.com/国内网络环境推荐源码中两种 Registry 的完整地址定义在 packages/create-umi/src/template.tsexport enum ERegistry { npm https://registry.npmjs.com/, taobao https://registry.npmmirror.com/, }选择结果会写入生成项目的.npmrc文件后续依赖安装与模板下载都基于该镜像源进行。国内开发者选择taobao通常能显著提升下载速度。四、生成后的项目结构解析选择完成后脚手架会自动生成一个最基本的 Umi 项目并根据所选客户端与镜像源安装依赖。生成结果如下. ├── package.json ├── pnpm-lock.yaml ├── src │ ├── assets │ │ └── yay.jpg │ ├── layouts │ │ ├── index.less │ │ └── index.tsx │ └── pages │ ├── docs.tsx │ └── index.tsx ├── tsconfig.json └── typings.d.ts对照仓库中的模板源文件 packages/create-umi/templates/app可以看到各文件的实际作用src/pages/index.tsx首页组件渲染 Yay! Welcome to umi! 欢迎页与示例图片src/pages/docs.tsx文档页示例src/layouts/index.tsx全局布局组件使用umi提供的Link与Outlet组织导航栏对应模板 index.tsx.tplsrc/layouts/index.less布局样式src/assets/yay.jpg欢迎页配图资源package.json由模板 package.json.tpl 渲染生成默认提供dev、build、setup、start等脚本依赖仅有umi开发依赖为 React/ReactDOM 类型声明与 TypeScripttsconfig.json、typings.d.tsTypeScript 编译配置与全局类型声明。生成后即可在项目根目录运行npm run dev启动开发服务器生产构建则使用npm run build五、从源码看脚手架的工作原理5.1 交互流程向导如何一步步执行核心生成器 packages/create-umi/src/index.ts 基于clackPromptsClack 交互组件实现交互式向导执行顺序为输入项目名默认值my-app若同名文件夹已存在会提示 Folder xxx already exists选择应用模板详见 5.3选择 Npm 客户端选择镜像源仅插件模板输入插件名默认umi-plugin-demo收尾输出 Youre all set!。任何一步按CtrlC取消都会打印红色的 Exit create-umi 并以退出码 1 结束。5.2 模板渲染变量注入选择完毕后脚手架通过BaseGenerator将模板文件渲染到目标目录injectInternalTemplateFiles注入的模板变量包括{ version: version.includes(-canary.) ? version : ^${version}, // 依赖版本号 npmClient, // 所选包管理器 registry, // 所选镜像源 author, // 从 Git 全局配置读取的作者名 邮箱 email, // Git 邮箱 withHusky, // 是否安装 Huskymonorepo 内不启用 extraNpmrc, // pnpm v7 需要追加的 .npmrc 配置 pluginName, // 插件名插件模板专用 }注意author/email并非手动输入而是通过getGitInfo()自动读取本机 Git 全局配置没有配置时留空。版本号若包含-canary.前缀预发版则原样输出否则统一使用^前缀以便获取同版本段的更新。5.3 不止一种模板四种内置模板pnpm create umi并非只能生成基础 React 项目向导第二步还会让你选择应用模板selectAppTemplate仓库内置四种模板packages/create-umi/templates模板目录适用场景Simple Appapp最基础的 Umi React 应用即本文第四节展示的结构Ant Design Promax集成更多插件与开箱即用能力的 Umi Max 应用包含mock、models、services、access、app.ts等完整工程结构Vue Simple Appvue-appVue 版本的基础应用布局与页面为.vue单文件组件Umi Pluginplugin面向插件开发者的空插件工程入口为src/index.ts5.4 外部模板从 npm 拉取远程模板除内置模板外脚手架还支持通过--template参数指定 npm 上的远程模板例如umijs/electron-template。其实现位于 packages/create-umi/src/template.ts脚手架会先请求${registry}${name}/latest获取最新版本号再拼接出.tgz包地址并下载解压到目标目录strip: 1去掉顶层目录。模板名不完整时会自动补全例如输入electron会依次尝试umijs/electron-template等名称下载失败会清理已创建目录并报错。5.5 依赖安装与工程化细节生成文件之后脚手架还会做几件收尾工作packages/create-umi/src/index.tsmonorepo 检测通过向上查找lerna.json或pnpm-workspace.yamldetectMonorepoRoot判断当前是否处于 monorepo 仓库内。若在 monorepo 内生成的.npmrc会被移动到仓库根目录且不初始化 HuskyGit 初始化默认执行git init可用--no-git跳过已存在.git目录时直接跳过依赖安装默认根据所选客户端与镜像源安装依赖可用--no-install跳过跳过且使用 pnpm v8 时会提示建议运行pnpm up -L安装最新版本依赖测试保障仓库的单元测试packages/create-umi/src/index.test.ts覆盖了app、plugin、max三种模板的生成与文件落盘验证确保脚手架各路径稳定可用。六、常用命令行参数速查基于 CLI 解析逻辑packages/create-umi/src/cli.ts与参数定义index.ts 的 IArgspnpm create umi支持以下常用参数参数作用my-umi-app位置参数指定目标项目目录名--default跳过全部交互使用默认配置生成app模板 pnpm npm 官方源--template name使用 npm 远程模板如umijs/electron-template而非内置模板--no-git跳过 Git 仓库初始化--no-install跳过依赖安装--version/-v输出版本号--help/-h查看帮助七、小结至此一条pnpm create umi命令背后的完整链路已经清晰向导收集项目名、模板、包管理器与镜像源 → 模板变量注入并渲染内置模板 → 检测 monorepo 与 Git 环境 → 按所选客户端安装依赖。无论你是想快速搭建一个可运行的基础 Umi 应用Simple App、一个 Vue 应用Vue Simple App、一个集成度更高的 Umi Max 工程Ant Design Pro还是一个插件开发骨架Umi Plugin脚手架都能一键完成并把工程规范tsconfig、typings、npm 脚本一并配置到位。开发者可在此基础上直接进入业务开发或参照 getting-started 指南 继续了解 Umi 的更多能力。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Umi 脚手架实战指南：用 `pnpm create umi` 一键初始化 React 项目
Umi 脚手架实战指南用pnpm create umi一键初始化 React 项目【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi本篇技术指南围绕 Umi 官方脚手架create-umi展开讲解如何通过pnpm create umi命令在向导引导下快速创建标准 Umi 项目、选择 Npm 客户端与镜像源、理解生成后的目录结构并结合仓库源码packages/create-umi剖析脚手架背后的交互流程、模板注入与依赖安装原理帮助读者从会用进阶到懂原理。一、脚手架是什么一条命令完成项目初始化Umi 官方提供了一个脚手架create-umi用于快速生成标准化的 Umi 项目骨架。你只需要一条命令向导就会自动完成选目录 → 选模板 → 选包管理器 → 选镜像源 → 生成文件 → 安装依赖 → 初始化 Git的全流程。# 直接运行向导会提示你输入目标文件夹名称 pnpm create umi # 一步到位在当前目录的 my-umi-app 文件夹下创建项目 pnpm create umi my-umi-app从源码实现看pnpm create umi实际执行的是create-umi包packages/create-umi/package.json 中bin字段指向bin/create-umi.js。CLI 入口packages/create-umi/src/cli.ts解析命令行参数后调用核心生成器 packages/create-umi/src/index.ts最终把参数注入模板文件并渲染到目标目录。运行后脚手架会依次询问两类问题下面逐一说明。二、向导选项一Pick Npm Client选择 Npm 客户端你可以从以下 5 个选项中挑选习惯的 Node 依赖管理工具客户端说明npmNode 官方自带包管理器cnpm淘宝定制的 npm 客户端主要面向国内网络环境tnpm阿里巴巴内部的 npm 客户端yarn经典的 JS 包管理器Yarn Classicpnpm高效、节省磁盘空间的包管理器Umi 官方推荐源码中对应枚举定义packages/create-umi/src/index.tsenum ENpmClient { npm npm, cnpm cnpm, tnpm tnpm, yarn yarn, pnpm pnpm, }值得注意的工程细节当选择pnpm时脚手架会先探测本地 pnpm 版本getPnpmVersion若主版本为 7且介于 7.0.0 与 7.13.5 之间会在生成的.npmrc中写入strict-peer-dependenciesfalse以抑制 pnpm v7 的 peer 依赖告警若主版本为 8 且版本号低于 8.7.0由于 pnpm v8 默认按最小版本解析依赖脚手架会改用pnpm up -LinstallAndUpdateWithPnpm把所有依赖升级到最新版避免生成一个依赖过旧的锁文件若未安装 pnpm脚手架会直接报错提示Please install pnpm first。三、向导选项二Pick Npm Registry选择 Npm 源镜像源说明npm官方源https://registry.npmjs.com/taobao淘宝镜像源https://registry.npmmirror.com/国内网络环境推荐源码中两种 Registry 的完整地址定义在 packages/create-umi/src/template.tsexport enum ERegistry { npm https://registry.npmjs.com/, taobao https://registry.npmmirror.com/, }选择结果会写入生成项目的.npmrc文件后续依赖安装与模板下载都基于该镜像源进行。国内开发者选择taobao通常能显著提升下载速度。四、生成后的项目结构解析选择完成后脚手架会自动生成一个最基本的 Umi 项目并根据所选客户端与镜像源安装依赖。生成结果如下. ├── package.json ├── pnpm-lock.yaml ├── src │ ├── assets │ │ └── yay.jpg │ ├── layouts │ │ ├── index.less │ │ └── index.tsx │ └── pages │ ├── docs.tsx │ └── index.tsx ├── tsconfig.json └── typings.d.ts对照仓库中的模板源文件 packages/create-umi/templates/app可以看到各文件的实际作用src/pages/index.tsx首页组件渲染 Yay! Welcome to umi! 欢迎页与示例图片src/pages/docs.tsx文档页示例src/layouts/index.tsx全局布局组件使用umi提供的Link与Outlet组织导航栏对应模板 index.tsx.tplsrc/layouts/index.less布局样式src/assets/yay.jpg欢迎页配图资源package.json由模板 package.json.tpl 渲染生成默认提供dev、build、setup、start等脚本依赖仅有umi开发依赖为 React/ReactDOM 类型声明与 TypeScripttsconfig.json、typings.d.tsTypeScript 编译配置与全局类型声明。生成后即可在项目根目录运行npm run dev启动开发服务器生产构建则使用npm run build五、从源码看脚手架的工作原理5.1 交互流程向导如何一步步执行核心生成器 packages/create-umi/src/index.ts 基于clackPromptsClack 交互组件实现交互式向导执行顺序为输入项目名默认值my-app若同名文件夹已存在会提示 Folder xxx already exists选择应用模板详见 5.3选择 Npm 客户端选择镜像源仅插件模板输入插件名默认umi-plugin-demo收尾输出 Youre all set!。任何一步按CtrlC取消都会打印红色的 Exit create-umi 并以退出码 1 结束。5.2 模板渲染变量注入选择完毕后脚手架通过BaseGenerator将模板文件渲染到目标目录injectInternalTemplateFiles注入的模板变量包括{ version: version.includes(-canary.) ? version : ^${version}, // 依赖版本号 npmClient, // 所选包管理器 registry, // 所选镜像源 author, // 从 Git 全局配置读取的作者名 邮箱 email, // Git 邮箱 withHusky, // 是否安装 Huskymonorepo 内不启用 extraNpmrc, // pnpm v7 需要追加的 .npmrc 配置 pluginName, // 插件名插件模板专用 }注意author/email并非手动输入而是通过getGitInfo()自动读取本机 Git 全局配置没有配置时留空。版本号若包含-canary.前缀预发版则原样输出否则统一使用^前缀以便获取同版本段的更新。5.3 不止一种模板四种内置模板pnpm create umi并非只能生成基础 React 项目向导第二步还会让你选择应用模板selectAppTemplate仓库内置四种模板packages/create-umi/templates模板目录适用场景Simple Appapp最基础的 Umi React 应用即本文第四节展示的结构Ant Design Promax集成更多插件与开箱即用能力的 Umi Max 应用包含mock、models、services、access、app.ts等完整工程结构Vue Simple Appvue-appVue 版本的基础应用布局与页面为.vue单文件组件Umi Pluginplugin面向插件开发者的空插件工程入口为src/index.ts5.4 外部模板从 npm 拉取远程模板除内置模板外脚手架还支持通过--template参数指定 npm 上的远程模板例如umijs/electron-template。其实现位于 packages/create-umi/src/template.ts脚手架会先请求${registry}${name}/latest获取最新版本号再拼接出.tgz包地址并下载解压到目标目录strip: 1去掉顶层目录。模板名不完整时会自动补全例如输入electron会依次尝试umijs/electron-template等名称下载失败会清理已创建目录并报错。5.5 依赖安装与工程化细节生成文件之后脚手架还会做几件收尾工作packages/create-umi/src/index.tsmonorepo 检测通过向上查找lerna.json或pnpm-workspace.yamldetectMonorepoRoot判断当前是否处于 monorepo 仓库内。若在 monorepo 内生成的.npmrc会被移动到仓库根目录且不初始化 HuskyGit 初始化默认执行git init可用--no-git跳过已存在.git目录时直接跳过依赖安装默认根据所选客户端与镜像源安装依赖可用--no-install跳过跳过且使用 pnpm v8 时会提示建议运行pnpm up -L安装最新版本依赖测试保障仓库的单元测试packages/create-umi/src/index.test.ts覆盖了app、plugin、max三种模板的生成与文件落盘验证确保脚手架各路径稳定可用。六、常用命令行参数速查基于 CLI 解析逻辑packages/create-umi/src/cli.ts与参数定义index.ts 的 IArgspnpm create umi支持以下常用参数参数作用my-umi-app位置参数指定目标项目目录名--default跳过全部交互使用默认配置生成app模板 pnpm npm 官方源--template name使用 npm 远程模板如umijs/electron-template而非内置模板--no-git跳过 Git 仓库初始化--no-install跳过依赖安装--version/-v输出版本号--help/-h查看帮助七、小结至此一条pnpm create umi命令背后的完整链路已经清晰向导收集项目名、模板、包管理器与镜像源 → 模板变量注入并渲染内置模板 → 检测 monorepo 与 Git 环境 → 按所选客户端安装依赖。无论你是想快速搭建一个可运行的基础 Umi 应用Simple App、一个 Vue 应用Vue Simple App、一个集成度更高的 Umi Max 工程Ant Design Pro还是一个插件开发骨架Umi Plugin脚手架都能一键完成并把工程规范tsconfig、typings、npm 脚本一并配置到位。开发者可在此基础上直接进入业务开发或参照 getting-started 指南 继续了解 Umi 的更多能力。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
