Umi 命令行完全指南dev、build、config 等内置 CLI 命令详解【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi 内置了丰富且可插拔的命令行接口CLI覆盖项目开发、生产构建、配置管理、代码生成、质量检查、依赖管理等完整生命周期。本文以官方命令参考文档为核心骨架结合当前仓库packages/preset-umi/src/commands/与packages/umi/src/cli/下的真实源码实现逐条讲解每个命令的用法、参数、运行效果与底层原理帮助你像使用工具一样熟练驾驭umi命令。命令总览与帮助系统在项目目录下直接运行umi help即可看到当前可用的全部命令umi help输出效果类似Usage: umi command [options] Commands: build build app for production config umi config cli dev dev server for development help show commands help lint lint source code using eslint and stylelint setup setup project deadcode check dead code version show umi version v show umi version plugin inspect umi plugins verify-commit verify the commit message, which is usually used with husky. preview locally preview production build run run the script commands, support for ts and zx generate generate code snippets quickly g generate code snippets quickly Run umi help command for more information of specific commands. Visit https://umijs.org/ to learn more about Umi.命令分为三类核心构建类dev开发服务器、build生产构建、preview产物预览工程效率类generate/g生成器、run运行 TS 脚本、config配置增删查、setup初始化、lint代码检查、deadcode死代码检查、mfsu依赖预构建管理辅助诊断类help、version/v、plugin list、verify-commit。从源码看CLI 的入口统一收敛在 packages/umi/src/cli/cli.ts 的run()函数中。该函数会先做 Node 版本校验、本地检查然后用yParser解析参数version与v、help与h互为别名并根据命令类型预置NODE_ENVdev、mfsu、setup、deadcode会自动设置为developmentbuild会自动设置为production其余命令则交给new Service().run2(...)走插件系统分发。这意味着命令本身也是插件注册的每个命令在 packages/preset-umi/src/commands/ 目录下通过api.registerCommand()注册help的输出正是遍历api.service.commands得到的见 commands/help.ts。需要查看某个命令的详细用法时可以追加子命令名umi help commandbuild生产环境构建执行生产构建产物默认输出到dist目录$ umi buildhelp中给出的常用变体# 构建但不压缩 COMPRESSnone umi build # 清理后重新构建 umi build --clean从 commands/build.ts 的实现看build的执行链路大致为清理临时目录absTmpPath并校验package.json触发onGenerateFiles钩子生成路由、入口等临时文件入口默认是absTmpPath/umi.ts收集babelPreset、chainWebpack、modifyWebpackConfig或 Vite 模式下的modifyViteConfig等插件钩子调用统一 bundlerwebpack / vite / mako的bundler.build(opts)完成打包输出 gzip 后的文件体积报告File sizes after gzip并生成index.html非 MPA 模式。其中 React 运行时会依据项目里 React 版本自动选择源码中semver.gte(react.version, 17.0.0)判断是否启用automatic运行时否则回退到classic。outputPath未配置时默认dist构建产物会带上对应的publicPath与base配置。config命令行读写配置config命令用于快速查看和修改配置支持list、get、set、remove四个子命令remove的别名是r。查看配置# 列出当前配置 $ umi config list - [key: polyfill] false - [key: externals] { esbuild: true } # 查看单个配置 $ umi config get mfsu - [key: externals] { esbuild: true } # 带名称过滤的 list $ umi config list --name history修改配置$ umi config set polyfill false set config:polyfill on /private/tmp/sorrycc-wsYpty/.umirc.ts $ umi config remove polyfill remove config:polyfill on /private/tmp/sorrycc-wsYpty/.umirc.tsconfig命令源码位于 commands/config/ 目录几个值得注意的细节list默认打印api.userConfig用户显式配置传入--all时才打印完整合并后的api.configget永远查询合并后的完整配置见 config.tsset在项目还没有配置文件时会先在工作目录下创建一个空的.umirc.ts内容为export default {};再通过umijs/ast的getASTByFilePathsetConfigByName做AST 级别的精准写入写回前还会用 prettier 格式化因此不会破坏文件里已有的注释与其他配置见 set.tsremove同理使用removeConfigByName从 AST 中删除指定配置项见 remove.ts。注意set/remove只针对本地配置文件.umirc.ts并不会修改环境变量或config/config.ts。dev本地开发服务器启动本地开发服务器用于开发调试$ umi dev ╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ Local: https://127.0.0.1:8001 ║ ready - ║ Network: https://192.168.1.1:8001 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1051 ms (416 modules)从 commands/dev/dev.ts 可以看到dev的完整工作流端口探测通过portfinder.getPortPromise自动寻找可用端口起始端口来自process.env.PORT默认值为DEFAULT_PORT即 8000host 来自process.env.HOST。如果设置了STRICT_PORT端口被占用时会直接报错退出生成临时文件触发onGenerateFiles首次生成之后监听pages、layouts、loading、app、global、overrides等目录支持 JS/CSS 路径扩展的变化以 2 秒防抖重新生成热重启机制监听package.json、配置文件、plugin.ts/plugin.js、public目录变化按需触发api.restartServer()或配置重新解析中间件与编译器汇聚addBeforeMiddlewares/addMiddlewares插件钩子按vite配置选择 Vite 或 webpack含 MFSU eager 策略时的 Worker 依赖构建最终调用bundler.dev(opts)启动服务。源码中的常用环境变量可归纳为环境变量作用默认值PORT指定开发服务器端口8000被占用时自动递增HOST指定监听 host0.0.0.0对应默认 hostSTRICT_PORT端口被占用直接退出而非换端口未设置generate代码生成器generate用于增量生成文件或开启特性命令别名是g。不带任何参数时进入交互式选择$ umi g # 或 $ umi generate ? Pick generator type › - Use arrow-keys. Return to submit. ❯ Create Pages -- Create a umi page by page name Enable Prettier -- Enable Prettier也可以直接指定参数跳过交互# 生成路由页面文件 $ umi g page index --typescript --less生成器注册在 commands/generators/ 目录下仓库中可用的生成器包括生成器 key说明page按页面名创建路由页面支持--typescript、--less、--dir、--eject等参数component生成组件文件jest/tsconfig/prettier一键写入对应工程化配置文件mock生成 mock 文件tailwindcss启用 Tailwind CSSdva/cypress/precommit/api分别生成状态管理、端到端测试、提交前钩子与 API 相关代码以page为例page.ts当指定了页面名时会走非交互模式逐路径生成未指定时则进入runInteractiveMode交互询问页面名模板目录位于templates/generate/page/并支持项目内自定义templates/page模板覆盖。help命令帮助不带参数时输出全部命令概览带命令名时输出该命令的详细帮助$ umi help Usage: umi command [options] Commands: build build app for production config umi config cli dev dev server for development help show commands help setup setup project version show umi version plugin inspect umi plugins generate generate code snippets quickly Run umi help command for more information of specific commands. Visit https://umijs.org/ to learn more about Umi.$ umi help build Usage: umi build [options] build app for production. Details: umi build # build without compression COMPRESSnone umi build # clean and build umi build --clean实现层面commands/help.tshelp本身也是一个registerCommand注册的命令其子命令帮助内容来自各命令注册时的details字段——这也是为什么help build能看到与build源码details完全一致的内容。lint代码规范检查lint用于检查并修正代码以符合规范默认同时启用 ESLint 与 Stylelint$ umi lint Usage: umi lint Support for validation of js, ts, tsx, jsx type files only: umi lint --eslint-only Support for validation of css, less and other style files only: umi lint --stylelint-only Support for cssinjs mode validation: umi lint --stylelint-only --cssinjs Correct the code: --fix从 commands/lint.ts 的源码可见更多细节未指定文件时默认检查范围是{src,test}/**/*.{js,jsx,ts,tsx,less,css}也可以像umi lint **/*.{ts,scss}这样传入自定义 glob支持--fix自动修复、--quiet忽略 warning、--eslint-only、--stylelint-only等布尔参数底层依赖umijs/lint包仓库 packages/lint/若未安装会提示先手动安装。plugin插件检查plugin命令用于检查插件注册情况目前仅支持list子命令$ umi plugin list - umijs/core/dist/service/servicePlugin - umijs/preset-umi (from preset) - umijs/preset-umi/dist/registerMethods (from preset) - umijs/preset-umi/dist/features/appData/appData (from preset) - umijs/preset-umi/dist/features/check/check (from preset) - umijs/preset-umi/dist/features/configPlugins/configPlugins (from preset) - virtual: config-styles - virtual: config-scripts - virtual: config-routes - virtual: config-plugins ...源码 commands/plugin.ts 会遍历api.service.plugins来自项目根目录./plugin.ts/./plugin.js的插件标记为(from local)来自umijs/preset的插件标记为(from preset)。该命令在排查“插件到底有没有生效”时非常有用。preview本地预览生产构建preview会启动一个本地静态服务器把构建产物dist目录跑起来供预览默认地址为 http://127.0.0.1:4172并支持 proxy、mock 等配置$ umi preview --port 9527指定--port后服务将运行在 http://127.0.0.1:9527也可以使用--host指定监听主机名。preview期间以下用户配置同样生效httpsproxymock从 commands/preview.ts 的实现看preview是一个基于 express 的迷你服务器启动前会断言构建产物目录存在不存在则提示先执行umi build依次挂载 CORS 头、gzip 压缩、用户配置的proxycreateProxy、mockcreateMockMiddlewaregetMockData通过sirv以base为前缀托管distDir并启用single: true与 history fallback 支持 SPA 路由配置了https时走createHttpsServer否则使用原生http.createServer默认端口4172可被--port覆盖。注意dist目录会随outputPath配置变化——如果构建时修改了outputPathpreview服务的目录也会对应改变。run运行 TypeScript 与 ESM 脚本run命令允许像用 node 运行 js 一样直接运行 TypeScript 和 ESM 文件$ umi run ./script.ts它可以搭配 zx 获得更好的脚本命令行体验。实现位于 packages/plugin-run/src/index.ts只接受.js/.ts后缀的脚本文件内部通过tsx运行时以fork子进程方式执行支持在配置中声明run.globals字符串数组执行时会把每个 global 转成import xxx注入脚本头部执行时设置NODE_NO_WARNINGS1屏蔽 Node 的实验性特性警告。setup项目初始化setup用于初始化项目主要工作是生成临时文件通常配置在package.json的scripts.postinstall中保证依赖安装后自动完成初始化{ scripts: { postinstall: umi setup } }从 commands/setup.ts 可见其实现非常轻量清理临时目录absTmpPath然后触发一次onGenerateFilesisFirstTime: true生成src/.umi等临时文件。它是 CI 环境下首次拉取代码、pnpm install后让项目立即具备可运行/可测试状态的关键一步。deadcode死代码检查deadcode用于找出src目录下未被引用的文件并把结果输出到根目录$ umi deadcode - Preparing... - begin check deadCode - write file /examples/umi-run/DeadCodeList-{timeStamp}.txt - check dead code end, please be careful if you want to remove them源码 commands/deadcode.ts 揭示的底层机制与参数基于madge按需自动安装从临时入口src/.umi/umi.ts出发构建依赖图默认排除node_modules、.d.ts、.umi只支持包含src目录的项目否则直接抛错支持--out file指定输出文件默认DeadCodeList-{时间戳}.json支持--gitInfo让输出文件额外携带文件的创建与最后修改 git 信息未发现死代码时输出Good job, no unusedFiles.发现时逐条列出并提示删除前务必谨慎。mfsuMFSU 依赖管理umi mfsu命令用于查看 MFSU 依赖信息、重建 MFSU 依赖以及清空 MFSU 依赖# 查看 mfsu 命令帮助 $ umi mfsu# 查看 MFSU 依赖列表 $ umi mfsu ls warning4.0.3 regenerator-runtime/runtime.js0.13.11 react/jsx-dev-runtime18.1.0 react-intl3.12.1 react-error-overlay/lib/index.js6.0.9 react18.1.0 qiankun2.8.4 lodash/noop4.17.21 lodash/mergeWith4.17.21 lodash/concat4.17.21 ...# 重建 MFSU 依赖 $ umi mfsu build info - Preparing... info - MFSU eager strategy enabled warn - Invalidate webpack cache since mfsu cache is missing info - [MFSU] buildDeps since cacheDependency has changed ... info - [plugin: umijs/preset-umi/dist/commands/mfsu/mfsu] [MFSU][eager] build success# 清空 MFSU 依赖 $ # 只删除依赖信息列表 $ umi mfsu remove $ # 删除依赖信息列表及产物文件 $ umi mfsu remove --all从 commands/mfsu/mfsu.ts 的源码可以看到子命令集合build/b重建支持--force、list/ls/l列出依赖、remove支持--all、help。它会根据mfsu.strategy配置选择EagerUtileager 策略或NormalUtil普通策略若配置中mfsu false则会提示“MFSU is not enabled”。verifyCommit提交信息校验verifyCommit用于校验 commit message 格式通常与 husky 配合使用。例如在.husky/commit-msg中配置#!/bin/sh . $(dirname $0)/_/husky.sh npx --no-install umi verify-commit $1从 commands/verify-commit.ts 的实现看校验规则为^(type(scope)?: )|(Merge|Revert|Version) 消息其中默认允许的type有feat、fix、docs、style、refactor、perf、test、workflow、build、ci、chore、types、wip、release、dep/deps、example/examples、merge、revert可通过配置verifyCommit.scope自定义允许的 type 列表通过verifyCommit.allowEmoji开启 emoji 前缀内部使用完整的 emoji-regex 匹配消息正文长度限制在 50 个字符以内同时会剔除#开头的注释行校验失败时以 exit code 1 退出并输出Invalid commit message format与正确示例如fix(core): handle events on blur (close #28)从而阻止不合规的提交保证后续自动生成 changelog 时格式统一。version查看版本号查看当前umi版本等价于umi -v$ umi version 4.0.0源码 commands/version.ts 中version的别名是v对应 CLI 入口cli.ts中yParser的version: [v]别名映射输出格式为umiversion并支持--quiet静默模式仍可通过返回值拿到版本号供脚本使用。结语至此umi的命令行全家桶已全部梳理完毕从日常高频的dev、build、preview到提效的generate、run、config再到工程质量相关的lint、deadcode、verify-commit以及进阶的mfsu、setup、plugin list、help。所有命令都注册在 packages/preset-umi/src/commands/ 下、通过统一的 packages/umi/src/cli/cli.ts 入口分发因此你既可以用umi help command随时查阅每个命令的details帮助也可以结合源码理解其内部行为。记住一个使用技巧遇到不确定的用法时优先umi help command它会给出与该命令源码中details完全一致的权威说明。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Umi 命令行完全指南：dev、build、config 等内置 CLI 命令详解
Umi 命令行完全指南dev、build、config 等内置 CLI 命令详解【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi 内置了丰富且可插拔的命令行接口CLI覆盖项目开发、生产构建、配置管理、代码生成、质量检查、依赖管理等完整生命周期。本文以官方命令参考文档为核心骨架结合当前仓库packages/preset-umi/src/commands/与packages/umi/src/cli/下的真实源码实现逐条讲解每个命令的用法、参数、运行效果与底层原理帮助你像使用工具一样熟练驾驭umi命令。命令总览与帮助系统在项目目录下直接运行umi help即可看到当前可用的全部命令umi help输出效果类似Usage: umi command [options] Commands: build build app for production config umi config cli dev dev server for development help show commands help lint lint source code using eslint and stylelint setup setup project deadcode check dead code version show umi version v show umi version plugin inspect umi plugins verify-commit verify the commit message, which is usually used with husky. preview locally preview production build run run the script commands, support for ts and zx generate generate code snippets quickly g generate code snippets quickly Run umi help command for more information of specific commands. Visit https://umijs.org/ to learn more about Umi.命令分为三类核心构建类dev开发服务器、build生产构建、preview产物预览工程效率类generate/g生成器、run运行 TS 脚本、config配置增删查、setup初始化、lint代码检查、deadcode死代码检查、mfsu依赖预构建管理辅助诊断类help、version/v、plugin list、verify-commit。从源码看CLI 的入口统一收敛在 packages/umi/src/cli/cli.ts 的run()函数中。该函数会先做 Node 版本校验、本地检查然后用yParser解析参数version与v、help与h互为别名并根据命令类型预置NODE_ENVdev、mfsu、setup、deadcode会自动设置为developmentbuild会自动设置为production其余命令则交给new Service().run2(...)走插件系统分发。这意味着命令本身也是插件注册的每个命令在 packages/preset-umi/src/commands/ 目录下通过api.registerCommand()注册help的输出正是遍历api.service.commands得到的见 commands/help.ts。需要查看某个命令的详细用法时可以追加子命令名umi help commandbuild生产环境构建执行生产构建产物默认输出到dist目录$ umi buildhelp中给出的常用变体# 构建但不压缩 COMPRESSnone umi build # 清理后重新构建 umi build --clean从 commands/build.ts 的实现看build的执行链路大致为清理临时目录absTmpPath并校验package.json触发onGenerateFiles钩子生成路由、入口等临时文件入口默认是absTmpPath/umi.ts收集babelPreset、chainWebpack、modifyWebpackConfig或 Vite 模式下的modifyViteConfig等插件钩子调用统一 bundlerwebpack / vite / mako的bundler.build(opts)完成打包输出 gzip 后的文件体积报告File sizes after gzip并生成index.html非 MPA 模式。其中 React 运行时会依据项目里 React 版本自动选择源码中semver.gte(react.version, 17.0.0)判断是否启用automatic运行时否则回退到classic。outputPath未配置时默认dist构建产物会带上对应的publicPath与base配置。config命令行读写配置config命令用于快速查看和修改配置支持list、get、set、remove四个子命令remove的别名是r。查看配置# 列出当前配置 $ umi config list - [key: polyfill] false - [key: externals] { esbuild: true } # 查看单个配置 $ umi config get mfsu - [key: externals] { esbuild: true } # 带名称过滤的 list $ umi config list --name history修改配置$ umi config set polyfill false set config:polyfill on /private/tmp/sorrycc-wsYpty/.umirc.ts $ umi config remove polyfill remove config:polyfill on /private/tmp/sorrycc-wsYpty/.umirc.tsconfig命令源码位于 commands/config/ 目录几个值得注意的细节list默认打印api.userConfig用户显式配置传入--all时才打印完整合并后的api.configget永远查询合并后的完整配置见 config.tsset在项目还没有配置文件时会先在工作目录下创建一个空的.umirc.ts内容为export default {};再通过umijs/ast的getASTByFilePathsetConfigByName做AST 级别的精准写入写回前还会用 prettier 格式化因此不会破坏文件里已有的注释与其他配置见 set.tsremove同理使用removeConfigByName从 AST 中删除指定配置项见 remove.ts。注意set/remove只针对本地配置文件.umirc.ts并不会修改环境变量或config/config.ts。dev本地开发服务器启动本地开发服务器用于开发调试$ umi dev ╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ Local: https://127.0.0.1:8001 ║ ready - ║ Network: https://192.168.1.1:8001 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1051 ms (416 modules)从 commands/dev/dev.ts 可以看到dev的完整工作流端口探测通过portfinder.getPortPromise自动寻找可用端口起始端口来自process.env.PORT默认值为DEFAULT_PORT即 8000host 来自process.env.HOST。如果设置了STRICT_PORT端口被占用时会直接报错退出生成临时文件触发onGenerateFiles首次生成之后监听pages、layouts、loading、app、global、overrides等目录支持 JS/CSS 路径扩展的变化以 2 秒防抖重新生成热重启机制监听package.json、配置文件、plugin.ts/plugin.js、public目录变化按需触发api.restartServer()或配置重新解析中间件与编译器汇聚addBeforeMiddlewares/addMiddlewares插件钩子按vite配置选择 Vite 或 webpack含 MFSU eager 策略时的 Worker 依赖构建最终调用bundler.dev(opts)启动服务。源码中的常用环境变量可归纳为环境变量作用默认值PORT指定开发服务器端口8000被占用时自动递增HOST指定监听 host0.0.0.0对应默认 hostSTRICT_PORT端口被占用直接退出而非换端口未设置generate代码生成器generate用于增量生成文件或开启特性命令别名是g。不带任何参数时进入交互式选择$ umi g # 或 $ umi generate ? Pick generator type › - Use arrow-keys. Return to submit. ❯ Create Pages -- Create a umi page by page name Enable Prettier -- Enable Prettier也可以直接指定参数跳过交互# 生成路由页面文件 $ umi g page index --typescript --less生成器注册在 commands/generators/ 目录下仓库中可用的生成器包括生成器 key说明page按页面名创建路由页面支持--typescript、--less、--dir、--eject等参数component生成组件文件jest/tsconfig/prettier一键写入对应工程化配置文件mock生成 mock 文件tailwindcss启用 Tailwind CSSdva/cypress/precommit/api分别生成状态管理、端到端测试、提交前钩子与 API 相关代码以page为例page.ts当指定了页面名时会走非交互模式逐路径生成未指定时则进入runInteractiveMode交互询问页面名模板目录位于templates/generate/page/并支持项目内自定义templates/page模板覆盖。help命令帮助不带参数时输出全部命令概览带命令名时输出该命令的详细帮助$ umi help Usage: umi command [options] Commands: build build app for production config umi config cli dev dev server for development help show commands help setup setup project version show umi version plugin inspect umi plugins generate generate code snippets quickly Run umi help command for more information of specific commands. Visit https://umijs.org/ to learn more about Umi.$ umi help build Usage: umi build [options] build app for production. Details: umi build # build without compression COMPRESSnone umi build # clean and build umi build --clean实现层面commands/help.tshelp本身也是一个registerCommand注册的命令其子命令帮助内容来自各命令注册时的details字段——这也是为什么help build能看到与build源码details完全一致的内容。lint代码规范检查lint用于检查并修正代码以符合规范默认同时启用 ESLint 与 Stylelint$ umi lint Usage: umi lint Support for validation of js, ts, tsx, jsx type files only: umi lint --eslint-only Support for validation of css, less and other style files only: umi lint --stylelint-only Support for cssinjs mode validation: umi lint --stylelint-only --cssinjs Correct the code: --fix从 commands/lint.ts 的源码可见更多细节未指定文件时默认检查范围是{src,test}/**/*.{js,jsx,ts,tsx,less,css}也可以像umi lint **/*.{ts,scss}这样传入自定义 glob支持--fix自动修复、--quiet忽略 warning、--eslint-only、--stylelint-only等布尔参数底层依赖umijs/lint包仓库 packages/lint/若未安装会提示先手动安装。plugin插件检查plugin命令用于检查插件注册情况目前仅支持list子命令$ umi plugin list - umijs/core/dist/service/servicePlugin - umijs/preset-umi (from preset) - umijs/preset-umi/dist/registerMethods (from preset) - umijs/preset-umi/dist/features/appData/appData (from preset) - umijs/preset-umi/dist/features/check/check (from preset) - umijs/preset-umi/dist/features/configPlugins/configPlugins (from preset) - virtual: config-styles - virtual: config-scripts - virtual: config-routes - virtual: config-plugins ...源码 commands/plugin.ts 会遍历api.service.plugins来自项目根目录./plugin.ts/./plugin.js的插件标记为(from local)来自umijs/preset的插件标记为(from preset)。该命令在排查“插件到底有没有生效”时非常有用。preview本地预览生产构建preview会启动一个本地静态服务器把构建产物dist目录跑起来供预览默认地址为 http://127.0.0.1:4172并支持 proxy、mock 等配置$ umi preview --port 9527指定--port后服务将运行在 http://127.0.0.1:9527也可以使用--host指定监听主机名。preview期间以下用户配置同样生效httpsproxymock从 commands/preview.ts 的实现看preview是一个基于 express 的迷你服务器启动前会断言构建产物目录存在不存在则提示先执行umi build依次挂载 CORS 头、gzip 压缩、用户配置的proxycreateProxy、mockcreateMockMiddlewaregetMockData通过sirv以base为前缀托管distDir并启用single: true与 history fallback 支持 SPA 路由配置了https时走createHttpsServer否则使用原生http.createServer默认端口4172可被--port覆盖。注意dist目录会随outputPath配置变化——如果构建时修改了outputPathpreview服务的目录也会对应改变。run运行 TypeScript 与 ESM 脚本run命令允许像用 node 运行 js 一样直接运行 TypeScript 和 ESM 文件$ umi run ./script.ts它可以搭配 zx 获得更好的脚本命令行体验。实现位于 packages/plugin-run/src/index.ts只接受.js/.ts后缀的脚本文件内部通过tsx运行时以fork子进程方式执行支持在配置中声明run.globals字符串数组执行时会把每个 global 转成import xxx注入脚本头部执行时设置NODE_NO_WARNINGS1屏蔽 Node 的实验性特性警告。setup项目初始化setup用于初始化项目主要工作是生成临时文件通常配置在package.json的scripts.postinstall中保证依赖安装后自动完成初始化{ scripts: { postinstall: umi setup } }从 commands/setup.ts 可见其实现非常轻量清理临时目录absTmpPath然后触发一次onGenerateFilesisFirstTime: true生成src/.umi等临时文件。它是 CI 环境下首次拉取代码、pnpm install后让项目立即具备可运行/可测试状态的关键一步。deadcode死代码检查deadcode用于找出src目录下未被引用的文件并把结果输出到根目录$ umi deadcode - Preparing... - begin check deadCode - write file /examples/umi-run/DeadCodeList-{timeStamp}.txt - check dead code end, please be careful if you want to remove them源码 commands/deadcode.ts 揭示的底层机制与参数基于madge按需自动安装从临时入口src/.umi/umi.ts出发构建依赖图默认排除node_modules、.d.ts、.umi只支持包含src目录的项目否则直接抛错支持--out file指定输出文件默认DeadCodeList-{时间戳}.json支持--gitInfo让输出文件额外携带文件的创建与最后修改 git 信息未发现死代码时输出Good job, no unusedFiles.发现时逐条列出并提示删除前务必谨慎。mfsuMFSU 依赖管理umi mfsu命令用于查看 MFSU 依赖信息、重建 MFSU 依赖以及清空 MFSU 依赖# 查看 mfsu 命令帮助 $ umi mfsu# 查看 MFSU 依赖列表 $ umi mfsu ls warning4.0.3 regenerator-runtime/runtime.js0.13.11 react/jsx-dev-runtime18.1.0 react-intl3.12.1 react-error-overlay/lib/index.js6.0.9 react18.1.0 qiankun2.8.4 lodash/noop4.17.21 lodash/mergeWith4.17.21 lodash/concat4.17.21 ...# 重建 MFSU 依赖 $ umi mfsu build info - Preparing... info - MFSU eager strategy enabled warn - Invalidate webpack cache since mfsu cache is missing info - [MFSU] buildDeps since cacheDependency has changed ... info - [plugin: umijs/preset-umi/dist/commands/mfsu/mfsu] [MFSU][eager] build success# 清空 MFSU 依赖 $ # 只删除依赖信息列表 $ umi mfsu remove $ # 删除依赖信息列表及产物文件 $ umi mfsu remove --all从 commands/mfsu/mfsu.ts 的源码可以看到子命令集合build/b重建支持--force、list/ls/l列出依赖、remove支持--all、help。它会根据mfsu.strategy配置选择EagerUtileager 策略或NormalUtil普通策略若配置中mfsu false则会提示“MFSU is not enabled”。verifyCommit提交信息校验verifyCommit用于校验 commit message 格式通常与 husky 配合使用。例如在.husky/commit-msg中配置#!/bin/sh . $(dirname $0)/_/husky.sh npx --no-install umi verify-commit $1从 commands/verify-commit.ts 的实现看校验规则为^(type(scope)?: )|(Merge|Revert|Version) 消息其中默认允许的type有feat、fix、docs、style、refactor、perf、test、workflow、build、ci、chore、types、wip、release、dep/deps、example/examples、merge、revert可通过配置verifyCommit.scope自定义允许的 type 列表通过verifyCommit.allowEmoji开启 emoji 前缀内部使用完整的 emoji-regex 匹配消息正文长度限制在 50 个字符以内同时会剔除#开头的注释行校验失败时以 exit code 1 退出并输出Invalid commit message format与正确示例如fix(core): handle events on blur (close #28)从而阻止不合规的提交保证后续自动生成 changelog 时格式统一。version查看版本号查看当前umi版本等价于umi -v$ umi version 4.0.0源码 commands/version.ts 中version的别名是v对应 CLI 入口cli.ts中yParser的version: [v]别名映射输出格式为umiversion并支持--quiet静默模式仍可通过返回值拿到版本号供脚本使用。结语至此umi的命令行全家桶已全部梳理完毕从日常高频的dev、build、preview到提效的generate、run、config再到工程质量相关的lint、deadcode、verify-commit以及进阶的mfsu、setup、plugin list、help。所有命令都注册在 packages/preset-umi/src/commands/ 下、通过统一的 packages/umi/src/cli/cli.ts 入口分发因此你既可以用umi help command随时查阅每个命令的details帮助也可以结合源码理解其内部行为。记住一个使用技巧遇到不确定的用法时优先umi help command它会给出与该命令源码中details完全一致的权威说明。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考