day0701

day0701

dva UmiJS

滴挖 乌米
很重要，公司可能会用

UmiJS

VERSION 3.X

一、介绍

1、介绍

（1）Umi是什么？

（2）什么时候不用umi？

（3）为什么不是？

2、Umi如何工作

（1）技术收敛

（2）插件和插件集

（3）配置式路由和约定式路由

（4）.umi临时文件

3、快速上手

（1）环境准备

$ node -v
v10.13.0

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

（2）脚手架

$ mkdir myapp && cd myapp

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

（3）安装依赖

$ yarn

yarn install v1.21.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.71s.

（4）启动项目

$ yarn start

Starting the development server...

✔ Webpack
  Compiled successfully in 17.84s

 DONE  Compiled successfully in 17842ms                                       8:06:31 PM


  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.12.34:8000

（5）修改配置

import {
    defineConfig } from 'umi';

export default defineConfig({
   
 layout: {
   },
  routes: [
    {
    path: '/', component: '@/pages/index' },
  ],
});

（6）部署发布

构建

$ yarn build

✔ Webpack
  Compiled successfully in 17.17s

 DONE  Compiled successfully in 17167ms                                       8:26:25 PM

Build success.
✨  Done in 20.79s.

tree ./dist

./dist
├── index.html
├── umi.css
└── umi.js

本地验证

$ yarn global add serve
$ serve ./dist

   ┌────────────────────────────────────────────────────┐
   │                                                    │
   │   Serving!                                         │
   │                                                    │
   │   - Local:            http://localhost:5000        │
   │   - On Your Network:  http://192.168.12.34:5000    │
   │                                                    │
   │   Copied local address to clipboard!               │
   │                                                    │
   └────────────────────────────────────────────────────┘

部署

二、Umi基础

1、目录结构

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts

（1）根目录

（2） /src目录

2、配置

export default {
   
  base: '/docs/',
  publicPath: '/static/',
  hash: true,
  history: {
   
    type: 'hash',
  },
}

（1）配置文件

config/routes.ts：

// config/routes.ts

export default [
    {
    exact: true, path: '/', component: 'index' },
];

config/config.ts：

// config/config.ts

import {
    defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
   
  routes: routes,
});

（2）TypeScript提示

import {
    defineConfig } from 'umi';

export default defineConfig({
   
  routes: [
    {
    path: '/', component: '@/pages/index' },
  ],
});

（3）本地临时配置

// .umirc.ts 或者 config/config.ts
export default {
    a: 1, b: 2 };

// .umirc.local.ts 或者 config/config.local.ts
export default {
    c: 'local' };

{
   
  a: 1,
  b: 2,
  c: 'local',
}

（4）多环境多份配置

// .umirc.js 或者 config/config.js
export default {
    a: 1, b: 2 };

// .umirc.cloud.js 或者 config/config.cloud.js
export default {
    b: 'cloud', c: 'cloud' };

// .umirc.local.js 或者 config/config.local.js
export default {
    c: 'local' };

{
   
  a: 1,
  b: 2,
  c: 'local',
}

{
   
  a: 1,
  b: 'cloud',
  c: 'local',
}

3、运行时配置

（1）配置方式

（2）配置项

modifyClientRenderOpts(fn)

let isSubApp = false;
export function modifyClientRenderOpts(memo) {
   
  return {
   
    ...memo,
    rootElement: isSubApp ? 'sub-root' : memo.rootElement,    
  };
}

patchRoutes({ routes })

export function patchRoutes({
    routes }) {
   
  routes.unshift({
   
    path: '/foo',
    exact: true,
    component: require('@/extraRoutes/foo').default,
  });
}

let extraRoutes;

export function patchRoutes({
    routes }) {
   
  merge(routes, extraRoutes);
}

export function render(oldRender) {
   
  fetch('/api/routes').then(res=>res.json()).then((res) =>