likes
comments
collection
share

003 umi 新手上高速，从空文件夹开始

作者站长头像
站长
· 阅读数 60

新建 git 仓库

新建 umi4-course 仓库

当然这一步并不是必须的，但是你最好还是使用 git 仓库来管理你的开发进度，至少有一个好处，你能看到你本次修改都改了哪些文件，当你遇到“为什么一直跑的好好的，突然就不行了”之类的疑问时，你就可以把你的代码恢复到它可以正确运行的时间节点上。

首先我们在 GitHub 上新建一个项目，组织和是否公开你可以自由选择，Repository name 填上你喜欢的名字就好。下方的 Initialize this repository with: 都不选，因为我们需要一个全新的全空白的仓库。

点击新建按钮，你就会进入项目管理页面。

页面上会显示新建项目的命令，对于 git 命令不熟悉的朋友，非常的友好。

本系列的仓库我放在了 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 
npm i pnpm -g

安装完 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 是啥

window 上添加环境变量需要使用 set 命令， 如 PATH=3000 DEV_UTILS=somekey umi build ，在window 上会提示找不到 PATH 命令。而在 mac 环境中使用 set 由没有意义，所以我们安装 cross-env 来抹平平台差异。需要而外安装 cross-env。

pnpm i cross-env --D

理解了上述这个基本概念之后，我们就可以着手修改我们的 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 开发团队所有，任何个人和组织在未经授权的情况下，搬运或部分搬运本系列文档，均属于违法行为。

对以上声明的声明：最近天猪老哥的文档被恶意转载还被“挂”被批，让我对文档开源有些失望。所以以上声明只是希望未来的某一天，不要有人恶意转了我的文章还要来骂我。我玻璃心承受不起。

转载自:https://juejin.cn/post/7102414878102519816
评论
请登录