支付宝框架UmiJs（五米）

最近有发现了一套dva过后的新的React应用框架--UmiJs（当然也可叫做“优米”或者“五米”），网址：https://umijs.org/zh-Hans/，github地址：https://github.com/umijs/umi。

不知道，对UmiJs这套框架有所了解的小伙伴们，对这套框架有什么看法呢？请留言哦！

也是刚刚了解这套框架，那么废话少说我们来切入主题吧。umi 就是一套零配置，按最佳实践进行开发的前端框架。

具有以下几点特性：

1、高性能

PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical CSS、preload、hash build、preact 等等，并且，你相同的代码会随着 umi 的改进而不断提升性能。

2、开箱即用

你只需一个依赖 umi 就可启动开发，而无需安装 react、preact、react-router、eslint、babel、jest 等。

3、多端

一键切换单页和多页，一份代码同时部署到 cdn、容器、云凤蝶等环境，详见部署文档。

4、扩展性

umi 的整个生命周期都是插件化的，甚至就是由大量插件组成，比如 http mock、service worker、layout、高清方案等，都是一个个的插件。

安装方法：

用 npm 安装 umi ：

$ npm i umi -g

或者用 yarn ：

$ yarn global add umi

然后可以 umi -v 检查版本号：

$ umi -v
umi@1.0.0

创建应用：

创建应用并进入。

$ mkdir myapp
$ cd myapp

启动 dev 服务器：

$ umi dev

Compiled successfully!

You can now view Your App in the browser.

  Local:            http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

创建我们第一个umi页面：

在 pages 目录里新建首页。

$ echo 'export default () => <div>Index Page</div>' > pages/index.js

如果你是 Window 系统，可以手动新建 pages/index.js，并填入：

export default () => <div>Index Page</div>;

然后在浏览器中打开 http://localhost:8000/，你会看到 Index Page 。

构建应用：

$ umi build

Compiled successfully.

File sizes after gzip:

  52.09 KB  static/umi.2b7e5e82.js
  186 B     static/__common-umi.6a75ebe1.async.js

构建产物会生成在 dist 目录：

$ tree ./dist

dist
├── index.html
└── static
    ├── __common-umi.6a75ebe1.async.js
    └── umi.2b7e5e82.js

1 directory, 3 files

部署：

$ npm i serve -g
$ cd dist
$ serve

Serving!

- Local:            http://localhost:5000   
- On Your Network:  http://{Your IP}:5000

Copied local address to clipboard!

这样UmiJS就可以算是上手了。

我们来看一下umi的目录结构：