React 之umi框架项目搭建

官方介绍：
umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，
并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，
覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，
目前内外部加起来已有 50+ 的插件。

搭建流程

手动搭建基础的Umi框架

第一步：环境

node环境, 版本是 8.10 或以上
包管理器，这里推荐使用使用 yarn 管理 npm 依赖
1.安装yarn 可根据官网介绍选择安装方式 
https://yarnpkg.com/zh-Hans/docs/install#windows-stable
2.全局安装 umi，并确保版本是 2.0.0 或以上。
yarn global add umi

第二步：创建项目

1、在需要生成项目的文件夹下，打开CMD or 终端 命令行输入 yarn create umi,如：

cd D:\REACT\PROJECT_UMI\myapp 
yarn create umi

2、选择需要生成的项目类型，上下箭头切换到 app 并回车

? Select the boilerplate type (Use arrow keys)
  ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
❯ app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

项目类型

app，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能

ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加

block，区块脚手架

plugin，插件脚手架

library，依赖（组件）库脚手架，基于 umi-plugin-library

3、此时会出现提示是否需要支持Typescript, 可根据实际项目开发情况选择是否使用，本次输入N并回车

? Do you want to use typescript? (y/N)

4、选择Typescript支持后再选择你需要的功能（多选），同样按上下箭头移动，并按 空格 键选中需要的功能 ,本次选择antd、dva并回车

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ dll

第三步：运行及编译

1、安装依赖（不执行此步项目启动时可能会异常），同样cmd在myapp路径下键入yarn并回车，等待安装依赖完成

yarn

2、启动项目，键入yarn start 并回车

yarn start

到此项目搭建完成，可以进行开发和调试
3、编译项目发布测试or生产时，执行yarn build，

yarn build

4、构建产物默认生成到 ./dist 下，然后通过 tree 命令查看

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

本地验证

发布之前，可以通过 serve 做本地验证
1、全局安装yarn global add serve

yarn global add serve

2、启动

serve ./dist

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

访问 http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。