新建 git 仓库
新建 umi4-course 仓库
本系列的仓库我放在了 Umi 官方的组织下面了，你可以放到你的个人仓库下，名字我暂定为 umi4-course。
将仓库同步到本地
在你的工作目录下，执行 git clone you-git-url ，如 git clone https://github.com/umijs/umi4-course.git，将会新建一个文件夹，文件夹名称为你上面取的包名，umi4-course 。
然后用 VS Code 打开这个空文件夹。打开 VS Code 的终端（点击 任务栏中的终端 - 新建终端）。
mkdir boilerplate 复制代码
创建之后的目录结构
umi4-course └── boilerplate 复制代码
初始化项目
cd boilerplate npm init -y Wrote to /Users/umi4-course/boilerplate/package.json: { "name": "boilerplate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 复制代码
生成 boilerplate 目录下面的 package.json 文件，相当于我们近期使用的项目目录是 umi4-course/boilerplate，所以你在执行命令的时候，都要 cd 到 boilerplate 目录下，后续的执行命令时，只会在 bash 中写明，不会再特别提醒。
安装 umi 模块
在项目中安装 umi，请在刚刚的命令行窗口中，输入以下命令安装 umi。
如果你已经关闭了刚刚的命令行窗口，那请你重新打开一个命令行窗口，并保证执行目录已经正确
cd boilerplate到了项目目录。
pnpm i umi@4.0.0-rc.20 复制代码
安装 pnpm
安装完 umi ，VS Code 会提示你“检测到过多更改。下面仅显示第10000个变更”，这是我们需要在跟路径(umi4-course)下新建 .gitignore 写入 node_modules 表示本次的 git 提交忽略 node_modules 文件夹下的所有变更。提交完，你将会看到本次提交变更文件数为 3。
如果添加完
.gitignore文件之后， VS Code 没有反应过来，可以选择重启 VS Code 窗口，mac 上快捷键command + shift + p(window 上是ctrl + shift + p)，在弹出窗口中输入>reload window重启窗口。
修改项目的启动命令
在很多的前端框架中，你都会涉及到使用命令启动项目服务的情况，一般文档中会让你执行，如 yarn start 、 npm start 或 npm run dev 这样的命令。
但可能你很少关注它是什么意思。其实它执行的是项目在 package.json 中定义好的 scripts 命令，你可以将它理解为一种别名，为了让你更加便利的执行命令。
比如，如下所示，当你执行 yarn start 时，真正执行的是 umi dev。
{ "scripts": { "start": "umi dev", }, } 复制代码
你也可以直接执行 umi dev 来完成同样的效果，但是这需要你保证你的全局变量中已经正确安装了 umi 命令，你也可以使用诸如 npx umi dev 这样的命令，来执行使用当前项目中的 umi 命令来启动项目。
当你的命令拥有多个版本是，比如说全局版本是 3.x，项目中版本是 4.x 时，
npx就会非常好用。
当你需要指定大量的环境变量或者同时执行多个命令时，scripts 这里的定义将会变得更高效。如下配置，项目会先执行编译，然后在产物目录中启动部署服务 serve，这样你就可以直接在 3000 端口的服务上预览你的项目。（这里只是举例说明，命令随手写的，无真实意义）
{ "scripts": { "review": "cross-env PATH=3000 DEV_UTILS=somekey umi build && cd dist && serve", }, } 复制代码
cross-env 是啥
理解了上述这个基本概念之后，我们就可以着手修改我们的 package.json
{ "name": "boilerplate", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "start": "umi dev", + "build": "umi build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "umi": "4.0.0-rc.20" } } 复制代码
创建页面
新建 boilerplate/src/pages/index.js 文件，并输入以下内容如：
export default () => <div>Index Page</div>; 复制代码
你也可以命令来完成，请打开你的终端，cd 进入你要在其中创建应用的目录，然后运行以下命令：
cd boilerplate mkdir -p src/pages echo 'export default () => <div>Index Page</div>;' > src/pages/index.js 复制代码
cd boilerplate仅仅表示接下来的命令操作需要在 boilerplate 目录下执行，而不是真的需要执行cd，后续整个教程中，都将沿用这个规则。
运行开发服务器
现在，运行以下命令启动开发服务器:
cd boilerplate pnpm start 复制代码
这将在 8000 端口上启动 Umi 应用程序的开发服务器。
> boilerplate@1.0.0 start /Users/umi4-course/boilerplate > umi dev info - Umi v4.0.0-rc.20 ready - App listening at http://127.0.0.1:8000 event - Compiled successfully in 485 ms (266 modules) info - MFSU buildDeps since cacheDependency has changed wait - Compiling... event - Compiled successfully in 40 ms (266 modules) event - MFSU Compiled successfully in 749 ms (586 modules) info - MFSU write cache info - MFSU buildDepsAgain info - MFSU skip buildDeps info - Memory Usage: 233.66 MB (RSS: 659.39 MB) 复制代码
让我们检查一下是否正常运行。在你的浏览器中打开 http://localhost:8000。
现在，如果你在屏幕上看到大大的 “Index Page”，说明你以上所有的操作都成功了。
仔细看上面的日志输出，我们可以看到开启 MFSU 之后，umi 的构建非常的快，umi@4 默认开启了 MFSU 。开启这个功能之后，虽然是使用 webpack，但是却比切换到 vite 构建要快。
扩展阅读，比 Vite 还快的 MFSU next.umijs.org/blog/mfsu-f…
Umi 缓存目录
boilerplate/node_modules/.cache
Umi 构建时的缓存文件生成目录，这里面将会存放 babel 缓存，MFSU 缓存等
如果 MFSU 构建异常，你可以删除 .cache 目录，它将会在再次构建的时候，被再次生成。不过 umi@4 中现在很少需要执行
删除缓存文件的操作了
boilerplate/src/.umi
dev 时的临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 时被删除并重新生成。类似的，在 umi build 的时候会生成临时文件 .umi-production 。
将 .umi 和 .umi-production 目录添加到 .gitignore 文件中。
node_modules + .umi + .umi-production 复制代码
最终本次提交，我们仅仅只有 4 次变更。
.gitignore boilerplate/pnpm-lock.yaml boilerplate/package.json boilerplate/src/pages/index.js 复制代码
感谢阅读，如果你觉得本文档对你有帮助，请为点赞，评论，收藏，并分享给你觉得同样需要的小伙伴。如果这个系列的课程感兴趣的朋友不多，可能会导致我断更。
本系列教材归 umijs 开发团队所有，任何个人和组织在未经授权的情况下，搬运或部分搬运本系列文档，均属于违法行为。
对以上声明的声明：最近天猪老哥的文档被恶意转载还被“挂”被批，让我对文档开源有些失望。所以以上声明只是希望未来的某一天，不要有人恶意转了我的文章还要来骂我。我玻璃心承受不起。
