umi 命令行完全指南build、dev、config、generate 等内置命令的用法与实现解析【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi 在umi可执行文件中内置了十余条命令行覆盖项目启动dev、生产构建build、产物预览preview、代码检查lint、配置文件增删查改config、代码生成generate与项目初始化setup等日常开发全流程。本文以官方文档 docs/docs/docs/api/commands.md 为主线逐条讲解每个命令的用法、可选参数与典型输出并结合仓库内命令实现源码主要位于 packages/preset-umi/src/commands说明其底层工作原理。读完本文你将能够熟练用命令行驱动 Umi 项目的开发、构建、调试、检查与清理工作。获取命令列表umi helpUmi 的命令全部通过api.registerCommand注册命令名、描述与详细帮助details都挂在命令定义上例如 preview.ts 中同时声明了description与details。要查看当前项目可用的全部命令在项目目录下运行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需要注意命令列表由当前项目实际加载的插件决定因此不同项目如开启了 max 能力的项目会看到更多命令help输出只是预设命令的一个子集。umi help command可以查看某个命令的详细帮助对应源码中注册命令时的details字段例如$ 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为方便查找下文按字母顺序介绍命令。build生产环境构建$ umi buildbuild用于构建生产环境产物。文档中展示的details提示了两种常用变体COMPRESSnone umi build构建但不压缩产物便于排查压缩阶段引入的问题或分析产物结构umi build --clean构建前先清理上次的构建产物避免脏文件残留。构建产物默认输出到dist目录其实际位置由配置项outputPath决定见下文preview一节在部署到服务器前应确认最终产物目录与部署脚本一致。config命令行快速查看与修改配置config命令基于umijs/ast直接对主配置文件.umirc.ts或config/config.ts做 AST 级读写而不是简单地做字符串替换因此可以保证修改后配置文件格式依然合法。命令入口见 packages/preset-umi/src/commands/config/config.ts支持list、get、set、remove别名r四个子命令。查看配置list 与 get$ umi config list - [key: polyfill] false - [key: externals] { esbuild: true } $ umi config get mfsu - [key: externals] { esbuild: true }源码细节list.tsumi config list默认打印用户配置api.userConfig加上--all参数对应const { _, all false } args中解析出的all则打印最终合并后的完整配置api.config即用户配置与默认值、插件配置合并的结果。支持按名称过滤umi config list --name history或umi config get history只输出指定 key若 key 不存在会抛出key xxx not found错误。如果配置值是一个函数例如onRouteChange这类回调型配置命令行无法展示其内容会以黄色提示The value data type does not support the view。修改配置set 与 remove$ 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.ts源码细节set.ts 与 remove.tsset通过setConfigByName(ast, name, value)修改 AST 并重新生成代码随后用内置 prettier 格式化后写回主配置文件保证改动风格与手写代码一致。若主配置文件尚不存在新项目set会在项目根目录自动创建内容为export default {};的.umirc.ts并写入配置。remove别名r通过removeConfigByName(ast, name)删除对应配置项。注意set/remove直接修改的是本地主配置文件文档中标注为 beta 能力而get/list读取的是内存中解析后的配置对象二者观察视角不同。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)dev启动开发服务器并开启热更新同时输出 Local 与 Network 两个访问地址。上例中端口为 8001、协议为 https均来自用户配置port、https等未配置时使用默认端口与 http。默认监听地址、端口与 https 行为都可依据项目配置调整参见 https 配置文档。编译成功日志中的compiled successfully in 1051 ms (416 modules)表示模块数量与耗时可据此判断项目规模与编译性能。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页面生成器page.ts支持多种模式详见 docs/docs/docs/guides/generator.mdumi g page交互式询问页面名称并让用户选择“目录模式”生成foo/index.{tsx,less}还是“文件模式”生成foo.{tsx,less}umi g page foo直接生成src/pages/foo.tsx与src/pages/foo.lessumi g page bar --dir以目录模式生成src/pages/bar/index.tsx与src/pages/bar/index.lessumi g page far/far/away/kingdom按路径嵌套生成页面。页面生成器会读取项目内自定义模板templates/page目录作为优先模板缺省时回退到内置模板如果项目开启了styledComponents则不再生成 less 文件而改用 styled-components 风格的页面模板。除页面外内置生成器还包括 API 路由umi g api模板见 api.ts支持foo、[id]等命名并自动生成响应 key、jest、mock、tailwindcss、tsconfig、dva、precommit、cypress等交互式列表中会全部列出。help查看帮助$ umi helphelp不带参数时输出命令总览带命令名时输出该命令的详细帮助即注册命令时的details例如上文umi help build。help命令本身同样注册在 commands 目录 中。lint代码规范检查与修复$ umi lint Usage: umi lint 支持只校验 js、ts、tsx、jsx 类型文件 umi lint --eslint-only 支持只校验 css、less 等样式文件 umi lint --stylelint-only 支持校验 cssinjs 模式校验 umi lint --stylelint-only --cssinjs 修正代码 --fix实现要点lint.ts默认检查范围是{src,test}/**/*.{js,jsx,ts,tsx,less,css}也可以显式传入自定义 glob如umi lint **/*.{ts,scss}内部委托给umijs/lint包执行若该包未安装会提示手动安装后再运行支持--eslint-only、--stylelint-only分别只跑 ESLint 或 Stylelint--cssinjs开启 cssinjs 模式校验--fix自动修复可修复问题--quiet不报告 warning 级别的告警命令本身以configResolveMode: loose方式注册意味着运行时不需要完整解析配置启动更快。plugin插件检视$ 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 ...plugin目前只支持list子命令用于列出当前进程加载的全部插件。从输出可以看到 Umi 的插件体系既有来自umijs/preset-umi的 preset 内置插件如appData、configPlugins也有运行时动态注册的virtual:虚拟插件如config-styles、config-routes、config-plugins以及用户自定义插件。排查“某个功能是否被加载”时这是最直接的入口。preview本地预览构建产物umi preview在本地启动一个静态 Web 服务器把构建产物目录默认dist运行在http://127.0.0.1:4172用于预览构建后的产物。命令实现见 preview.ts支持 proxy、mock、https 等用户配置。$ umi preview --port 9527此时服务器运行在http://127.0.0.1:9527。也可以用--host指定 hostname$ umi preview --host 0.0.0.0在preview时生效的用户配置包括https开启后 preview 服务器将按用户配置启动 HTTPSproxy为 preview 服务器注入代理中间件源码中通过createProxy(proxy, app)挂载mock为 preview 服务器挂载 mock 中间件便于联调接口。源码层面还可以看到 preview 服务器做了以下几件事启动前会检查构建产物目录是否存在不存在则断言报错提示先运行umi buildbuild output dir not found, please run umi build自动附加 CORS 响应头、gzip 压缩中间件与 history 路由回退中间件当history.type为browser且base配置不为/时访问/或/index.html会 302 重定向到base路径端口未指定时默认 4172若被占用会自动通过 portfinder 寻找下一个可用端口。注意dist目录会随outputPath配置的变更而变更preview 实际预览的是outputPath指向的目录。run直接运行 TypeScript 与 ESM$ umi run ./script.tsumi run允许像用 node 运行 js 一样运行 TypeScript 与 ESM 文件内部通过 requireHook 完成 TS/ESM 的转译加载相关实现见 packages/umi/src/service/requireHook.ts。由于脚本运行在 Umi 的 Node 环境中天然继承了路径别名、环境变量等解析能力。文档建议搭配 zx 使用把 shell 能力与 TS 类型检查结合写出更易维护的脚本任务。setup项目初始化setup负责生成临时文件、完成项目初始化通常在package.json的postinstall中调用保证依赖安装完成后项目即可直接使用{ scripts: { postinstall: umi setup } }它对应源码中注册的setup命令setup.ts会执行类似onGenerateFiles的钩子流程把.umi等临时目录生成到位。执行umi dev/umi build之前如果临时文件缺失通常可以先跑一次umi setup。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实现细节deadcode.ts底层依赖madge做依赖图分析先运行setup生成.umi临时目录以生成的入口文件src/.umi/umi.ts为起点配合 tsconfig 的paths、用户alias配置构建模块解析上下文递归分析依赖关系只支持包含src目录的项目Only supports projects containing src folders.自动排除node_modules、.d.ts、.umi等目录/文件无未引用文件时输出 Good job, no unusedFiles.默认输出文件名形如DeadCodeList-{timeStamp}.txt也可用--out file自定义输出路径--out为true时使用默认名加--gitInfo时输出为 JSON并附上每个文件的创建时间与最后修改时间需在 git 仓库中执行若项目未安装madge命令会自动把madge6.0.0写入 devDependencies 并用当前项目的包管理器安装首次运行会稍慢。删除死代码前请务必人工核对正如命令提示的please be careful if you want to remove them。mfsuMFSU 依赖管理MFSU 是 Umi 基于 webpack5 Module Federation 的依赖预编译提速方案默认开启通过配置mfsu: false可关闭详见 docs/docs/docs/guides/mfsu.md。umi mfsu命令mfsu.ts提供依赖信息查看、重新构建与清除三类操作。$ umi 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 ...$ 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$ # 删除依赖信息列表 $ umi mfsu remove $ # 删除依赖信息列表和产物文件 $ umi mfsu remove --all实现要点子命令支持缩写list/ls/l查看依赖build/b重新构建build前会先清除缓存 JSON--force可强制重建remove清除缓存默认只删依赖信息列表--all连产物文件一起删当配置mfsu: false时会提示MFSU is not enabled并直接返回命令会根据mfsu.strategy选择实现eager策略使用EagerUtil扫描式依赖分析项目代码与依赖可并行构建默认normal策略使用NormalUtil编译时收集依赖串行构建并支持mfsu: { esbuild: true }用 esbuild 替代 webpack 构建依赖以进一步提升速度。verifyCommit提交信息校验verifyCommit用于校验 git commit message 是否符合规范通常与 husky 搭配使用在.husky/commit-msg中配置#!/bin/sh . $(dirname $0)/_/husky.sh npx --no-install umi verify-commit $1这样每次提交时都会用 Umi 内置的 commit message 校验规则对应 verify-commit.ts检查$1传入的 commit message 文件格式不合规则提交失败从而在团队协作中统一提交规范。version查看版本号$ umi version 4.0.0version等价于umi -v输出当前安装的 umi 版本。版本号来自packages/umi包的真实发布版本可用于排查升级前后行为差异。小结与速查表命令别名作用常用参数umi build-生产构建--clean环境变量COMPRESSnone跳过压缩umi config-查看/修改配置list--all、--name、get、set、remove/rumi dev-启动开发服务器端口/https 由配置决定umi generateg微生成器page、api等生成器名与参数umi help-查看帮助help command查看详情umi lint-代码规范检查--eslint-only、--stylelint-only、--cssinjs、--fix、--quietumi plugin-检视插件listumi preview-本地预览构建产物--port、--hostumi run-运行 TS/ESM 脚本脚本路径umi setup-项目初始化生成临时文件常置于postinstallumi deadcode-死代码检查--out、--gitInfoumi mfsu-MFSU 依赖管理ls/list、build、remove--allumi verify-commit-校验 commit message与 husky 配合umi versionv查看版本-Umi 的命令系统本质上是插件注册制的上述命令大多来自 packages/preset-umi/src/commands 目录任何插件都可以通过api.registerCommand注册新命令这也是umi plugin list能看到大量来自 preset 命令的原因。理解这一点后你不仅会使用内置命令还能在阅读 插件开发文档 后为自己的项目定制专属 CLI 命令。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考