umi.js 一个集成 react 全家桶的框架

umi.js 一个集成 react 全家桶的框架

推荐课程：用 React.js+Egg.js 造轮子 全栈开发旅游电商应用

1，为什么选择 umi.js 这个框架

使用 react 开发项目之后，渐渐发现，常用的第三方依赖包就那么几个：主框架 react.js，路由 react-router，数据处理 redux，代码监测 eslint，单元测试 jest，等等。那么有没一个框架能讲这些全家桶集成起来，默认提供一些配置，这样使用起来就会方便许多了。
今天，就为大家介绍一块满足需求的框架 umi.js。

2，什么是 umi.js

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。它通过约定、自动生成代码和解析代码等方式来辅助开发，减少我们开发者的代码量。集成了 react 常用的一些第三方框架。

3，umi 的优点有哪些

• 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
• 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
• 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
• 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
• 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
• 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

4，使用 umi

4.1 安装 umi

npm install -g umi

// 使用 yarn
yarn global add umi

4.2 创建项目

先找个地方建个空目录

mkdir myapp && cd myapp

然后通过官方工具创建项目

yarn create @umijs/umi-app

安装依赖

yarn install

启动项目

yarn start

启动后就可以在浏览器访问了。

4.3 动态路由

这个动态路由用起来比较方便，在pages目录下面新建a.jsx，那么 umi 会自动添加对应的路由，无需手动配置路由。当然，umi 也支持手动配置路由。

4.4 Mock 数据

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

Umi 约定 /mock 文件夹下所有文件为 mock 文件。

.
├── mock
    ├── api.ts
    └── users.ts
└── src
    └── pages
        └── index.tsx

官方支持的写法

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },
  // GET 可忽略
  '/api/users/1': { id: 1 },
  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
}