React学习之UmiJS上手

2020-10-11

序

把React官网的教程基本都看过一遍, 感觉自己已经天下无敌正准备大战伸手的时候, 突然发现, React-Router, Redux, TypeScript 这些完全不能做到开箱即用, 感觉React他们的目的是打算做一个最基本的东西, 然后其他什么组件都可以你自己定制, 打造属于自己的一套模块, 这样对一些大神来说非常给力, 他们喜欢这种什么都掌握再自己手里的感觉. 但是对于我这种普通小白来说门槛还是有点高了, 网上找了很多教程, 要么就是几年前的感觉技术过时, 要么根本阐述不清楚, 还好没多久我就找到了由蚂蚁推出的UmiJS.

Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

三分钟上手 Umi

手动创建文件，

# 创建目录
$ mkdir myapp && cd myapp
# 安装依赖
$ yarn add umi
# 创建页面
$ npx umi g page index --typescript --less
# 启动开发
$ npx umi dev

目录结构

一个基础的 Umi 项目大致是这样的，

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts

根目录

package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

.umirc.ts

配置文件，包含 umi 内置功能和插件的配置。

.env

环境变量。

比如：

PORT=8888
COMPRESS=none

dist 目录

执行 umi build 后，产物默认会存放在这里。

mock 目录

存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

public 目录

此目录下所有文件会被 copy 到输出路径。

/src 目录

.umi 目录

临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。

layouts/index.tsx

约定式路由时的全局布局文件。

pages 目录

所有路由组件存放在这里。

app.ts

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

配置文件

Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6。一份常见的配置如下，

export default {
  base: '/docs/',
  publicPath: '/static/',
  hash: true,
  history: {
    type: 'hash',
  },
}

如果项目的配置不复杂，推荐在 .umirc.ts 中写配置；如果项目的配置比较复杂，可以将配置写在 config/config.ts 中，并把配置的一部分拆出去，比如路由配置可以拆成单独的 config/routes.ts。

两种方式二选一，.umirc.ts 优先级更高。

路由

在 Umi 中，应用都是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

Umi的路由跟Vue的路由就是大同小异了, 跟多的信息可以点击 Umi路由文档查看