最近有发现了一套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的目录结构:
一定要记得pages目录是强约定目录哦。
小伙伴,有什么要说的呢?谈一下,大家对支付宝这套新出框架“五米”的感想吧?