三、mock与umi-plugin-react插件

一、Mock 数据

umi 里约定 mock 文件夹下的文件或者 page(s) 文件夹下的 _mock 文件即 mock 文件。

这个mock数据，默认导出的结果，前面为请求方式和请求的url，后面的为返回前端的结果。结果可以是函数，也可以是对象

关闭mock：直接返回mock：false，就可以关闭mock了。如果是用的ant design pro那么直接运行命令的时候就可以关闭mock

• 注：返回值为函数的时候就很灵活，函数里面就相当于在写java代码一样(只不过还是js语法)，可以设置返回头，req.body相当于请求体里面是传过来的请求参数，而用res.send()来返回数据

function create(req, res) {
      const {uaccount} = req.body;
      res.setHeader('Access-Control-Allow-Origin', '*'); // 添加跨域请求头
        res.send ({
          timestamp: 1111111111,
          ...req.body,
        });
}

export default {
  mock: false, // 这个参数代表关闭当前文件的mock
  
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET POST 可省略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': create,
  
};

联调：当本地开发完毕之后，如果服务器的接口满足之前的约定，那么你只需要不开本地代理或者重定向代理到目标服务器就可以访问真实的服务端数据，非常方便

二、在umi中整合dva一起使用

1、安装umi-plugin-react插件

自>= umi@2起，把dva整合到umi中，可以直接通过 umi-plugin-react 插件来配置。这东西内置了react-dom

按目录约定注册 model，无需手动 app.model
文件名即 namespace，可以省去 model 导出的 namespace key
无需手写 router.js，交给 umi 处理，支持 model 和 component 的按需加载
内置 query-string 处理，无需再手动解码和编码
内置 dva-loading 和 dva-immer，其中 dva-immer 需通过配置开启
开箱即用，无需安装额外依赖，比如 dva、dva-loading、dva-immer、path-to-regexp、object-assign、react、react-dom 等

安装：npm install --save umi-plugin-react

配置插件：这个是在, config/config.js 里面的plugins上面配置的。所有功能默认关闭，有真值配置才会开启,所有的配置都写在umi-plugin-react这个字符串，后面的对象里面。配置如下：

export default {plugins: [['umi-plugin-react',{dva: true,antd: true,},]],};

• (1)dva: 类型Object。基于 umi-plugin-dva 实现，功能详见 和 dva 一起用。下面为配置项：
  • immer,是否启用 dva-immer
  • dynamicImport,是否启用按需加载，配置项同 #dynamicImport，并且如果在 #dynamicImport 有配置，配置项会继承到 dva 中
  • hmr,是否启用 dva 的 hmr
  • 备注：如果项目中有 dva 依赖，则优先使用项目中的依赖

dva: {hmr: true,}

• (2)antd: 类型Boolean。启用后自动配置 babel-plugin-import 实现 antd, antd-mobile 和 antd-pro 的按需编译，并且内置 antd, antd-mobile 依赖，无需手动在项目中安装。
  • 备注：如果项目中有 antd 或者 antd-mobile 依赖，则优先使用项目中的依赖

antd: true,

• (3)routes: 类型Object。基于 umi-plugin-routes 实现，用于批量修改路由。下面为配置项：
  • exclude,值为 Array(RegExp)，用于忽略某些路由，比如使用 dva 后，通常需要忽略 models、components、services 等目录
  • update,值为 Function，用于更新路由

• (4)locale: 类型Object。基于 umi-plugin-locale 和 react-intl 实现，用于解决 i18n(这个为国际化，Internationalization 这个单词去掉头尾的i和n刚好还剩下18个字符) 问题。下面为配置项：
  • default: 'zh-CN',// default zh-CN, if baseSeparator set _，default zh_CN
  • baseNavigator: true,// default true, when it is true, will use navigator.language overwrite default
  • antd: true,// use antd, default is true
  • baseSeparator: '-',// the separator between lang and language, default -

locale: {
        enable: true, // default false
        default: 'zh-CN', // default zh-CN
        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
      }

• (5)dynamicImport: 类型Object。实现路由级的动态加载（code splitting），可按需指定哪一级的按需加载。下面为配置项：
  • webpackChunkName,是否通过 webpackChunkName 实现有意义的异步文件名
  • loadingComponent,指定加载时的组件路径
  • level,指定按需加载的路由等级

dynamicImport: {
        loadingComponent: './components/Ploading/index',
        webpackChunkName: true,
        level: 3,
      }

• (6)dll: 类型Object。通过 webpack 的 dll 插件预打包一份 dll 文件来达到二次启动提速的目的。下面为配置项：
  • include,
  • exclude,

dll: {
    include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
    exclude: ['@babel/runtime'],
   }

• (7)pwa: 类型Object。开启 PWA 相关功能。下面为配置项：
  • manifestOptions,类型：Object，包含如下属性
    • srcPath: manifest 的文件路径，类型：String，默认值为 src/manifest.json（如果 src 不存在，为项目根目录）
  • workboxPluginMode,Workbox 模式，类型：String，默认值为 GenerateSW 即生成全新 Service Worker ；也可选填 InjectManifest 即向已有 Service Worker 注入代码，适合需要配置复杂缓存规则的场景
  • workboxOptions,Workbox 配置对象，其中部分重要属性如下
    • swSrc类型：String，默认值为 src/service-worker.js，只有选择了 InjectManifest 模式才需要配置
    • swDest类型：String，最终输出的文件名，默认值为 service-worker.js 或者等于 swSrc 中的文件名
    • importWorkboxFrom类型：String，默认从 Google CDN 加载 Workbox 代码，可选值 ‘local’ 适合国内无法访问的环境
  • 备注：PWA 相关功能包括：<1>生成 manifest.json，对于 WebManifest 中引用的 icons 图标，建议放在项目根目录 public/ 文件夹下，最终会被直接拷贝到构建目录中。<2>在 PRODUCTION 模式下生成 Service Worker

pwa: {
    manifestOptions: {
      srcPath: 'path/to/manifest.webmanifest',
    },
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      importWorkboxFrom: 'local',
      swSrc: 'path/to/service-worker.js',
      swDest: 'my-dest-sw.js',
    },
  },

• (8)fastClick: 类型Boolean。启用 fastClick，解决移动端点击延迟问题。

2、model 注册

model 分两类，一是全局 model，二是页面 model。全局 model 存于 /src/models/ 目录，所有页面都可引用；页面 model 存于/src/pages/**/models/目录,不能被其他页面所引用。

• (1)model.js： 如果，一个文件夹不需要建 models 目录，则可以只指定一个model.js 为单文件 model。
• (2)一个文件夹对应的model为自身路径的model和父级路径的model：如下路径，/c/d 的 page model 为 src/pages/c/model.js, src/pages/c/d/models/d.js

+ src
  + pages
    + c
      - model.js // 这个直接为一个单文件model
      + d // 它的model包括自身路径下面的，和父路径的
        + models
          - d.js
        - page.js
      - page.js

3、配置及插件

在 src 目录下新建 app.js，里面配置dva的log，内容如下：

export const dva = {
  config: {onError(e) {e.preventDefault();console.error(e.message);},},
  plugins: [require('dva-logger')(),],};

全局 layout 使用 connect 后路由切换后没有刷新: 需用 withRouter 包一下导出的 react 组件，注意顺序

import withRouter from 'umi/withRouter';
export default withRouter(connect()(Layout));

三、服务端渲染（SSR）

Support in 2.8.0+,但是目前公司的umi版本还是^2.4.4