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

2,898 阅读7分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情

新建 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,所以你在执行命令的时候,都要 cdboilerplate 目录下,后续的执行命令时,只会在 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 startnpm startnpm 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 开发团队所有,任何个人和组织在未经授权的情况下,搬运或部分搬运本系列文档,均属于违法行为。

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