UmiJS

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');
}

 

展开阅读全文

没有更多推荐了,返回首页