UmiJS
阅读数:196 评论数:0
跳转到新版页面分类
html/css/js
正文
umi是一个可插拔的企业级react应用框架, umi以路由为基础.
参考: https://umijs.org/zh/guide/#%E7%89%B9%E6%80%A7
目录及约定
在文件和目录的组织上, umi更倾向于选择约定的方式, 一个复杂的目录结构如下:
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录，基于 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二选一
└── src/ // 源码目录，可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录，里面的文件即路由
├── .umi/ // dev 临时目录，需添加到 .gitignore
├── .umi-production/ // build 临时目录，会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1，任意命名，导出 react 组件
├── page1.test.js // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2，任意命名
├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── app.js // 运行时配置文件
├── .umirc.js // umi 配置，同 config/config.js，二选一
├── .env // 环境变量
└── package.json(1) mock
此目录下所有的.js文件都会被解析为mock文件, 比如, 新建 mock/users.js, 内容如下:
export default {
'/api/users': ['a', 'b'],
}
然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。(2).test.(js|ts)和.e2e.(js|ts)
umi test会查找所有的.test.js和.e2e.js文件来跑测试.
(3) src/pages/document.ejs
umi约定如果这个文件存在, 会作为默认模板, 内容上需要保证有<dev id="root"></div>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Your App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>插件
umi区别于其他前端开发框架和工具的核心就是它的插件机制, 插件可以是一个npm包, 也可以是路径直接引向一个JS的模块.
// .umirc.js
export default {
plugins: [
['umi-plugin-dva', {
immer: true,
}],
['./src/plugins/customPlugin.js', {
// plugin config
}]
],
};1. umi-plugin-react
这是一个官方封装的一个插件集, 包含18个常用的功能, 默认所有功能是关闭的, 有真值配置才会开启.
(1) dva
基于umi-plugin-dva实现, 如果项目中有dva依赖, 则优先使用项目中的依赖.
配置项:
- immer, 是否启用dva-immer
- dynamicImport, 是否启用按需加载
- hmr, 是否启用dva的hmr
(2)antd
启动后内置antd, antd-mobile依赖, 无需手动在项目中安装.
如果项目中有antd或者antd-mobile依赖, 则优先使用项目中的依赖.
(3) routes
基于umi-plugin-routes实现, 用于批量修改路由.
项置项:
- exclude, 用于忽略某些路由
- update, 用于更新路由
(4) locale
基于umi-plugin-locale和react-intl实现, 用于解决i18n问题.
项置项包含:
- default: 'zh-CN', //default zh-CN
- baseNavigator: true, // default true, when it is true, will use navigator.language overwrite default
- antd: true, //use antd, default is true
(5) library
可以切换底层库为preact或react
(6) dynamicImport
实现路由级的动态加载, 可按需指定哪一级的按需加载.
配置项:
- webpackChunkName: 是否通过webpackChunkName实现有意义的异步文件名.
- loadingComponent: 指定加载时的组件路径
- level: 指定按需加载的路由等级.
(7) dll
通过webpack的dll插件预打包一份dll文件来达到二级启动提速的目的.
(8) hardSource
通过hard-source-webpack-plugin开启webpack缓存, 二次启动时间减少80%, 推荐非windows电脑使用, windows下由于大文件IO比较慢, 可自行决定是否启用.
(9) pwa
开启pwa相关功能:
- 生成manifest.json, 对于WebManifest中引用的icons图标, 建议放在项目根目录public/文件夹下, 最终会直接拷贝到构建目录中.
- 在PRODUCTION模式下生成Service Worker
(10) hd
开启高清方案
(11) fastClick
启用fastClick
(12)title
开启title插件, 设置HTML title.
如果你使用了自定的src/pages/document.ejs, 你需要在里面加入<title><%= context.title %></title>, 以确保title.defaultTitle能正常被注入到生成的index.html里
(13) chunks
(14) scripts
放在<body>里, 在umi.js之后, 可使用<%= PUBLIC_PATH %>指向publicPath
(15) headScripts
放在<head>里, 在umi.js之前, 可使用<%= PUBLIC_PATH %> 指向publicPath
(16) metas
(17) links
可使用<%= PUBLIC_PATH %>指向publicPath
路由
1. 约定式路由
假设pages目录结构如下:
+ pages/
+ users/
- index.js
- list.js
- index.js那么, umi会自动生成路由配置如下:
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/list', component: './pages/users/list.js' },
]2. 配置式路由
此配置项存在时则不会对src/pages目录做约定式的解析.
export default {
routes: [
{ path: '/', component: './a' },
{ path: '/list', component: './b', Routes: ['./routes/PrivateRoute.js'] },
{ path: '/users', component: './users/_layout',
routes: [
{ path: '/users/detail', component: './users/detail' },
{ path: '/users/:id', component: './users/id' }
]
},
],
};3. 权限路由
通过配置路由的Routes属性来实现, 约定式的通过yaml注释添加, 配置式的直接配置即可.
在页面间跳转
1. 声明式
基于umi/link, 通常作为React组件使用
import Link from 'umi/link';
export default () => (
<Link to="/list">Go to list page</Link>
);2. 命令式
基于umi/router, 通常在事件处理中被调用.
import router from 'umi/router';
function goToListPage() {
router.push('/list');
}