umijs多环境配置_项目实战-UmiJS开发（附带qiankun）

前言

Coder 是怎么样提高自己的实力？一件事件做坚持一万遍，唯手熟尔。

不知道各位有没有体会，总感觉之前的代码写的很 low 逼，想抽点空来折腾折腾自己还是很有乐趣的。重构还是很有乐趣的。手工狗头镇楼！

搭建基础框架

一般来说，中小型团队的中台项目都是前端自己主导样式，而样式、布局、路由、权限等等一系列的通用性很强的基础框架，自研比较花时间，投入的回报率不高，最好的方法就是在比较成熟的方案上进行一定的个性化定制，性价比会很高，所以我们也采用了 UmiJS + ANT DESIGN PRO 的架构来进行项目升级(之前的老项目基于 Umi2.0 与 ANT DESIGN PRO 3.0 开发)

UmiJS 是什么？

UmiJS，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

ANT DESIGN PRO 是什么？

Ant Design Pro 是一个企业级中后台前端/设计解决方案，基于 Ant Design 的设计规范和基础组件的基础上，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

快速搭建基础框架

我们直接采用 UmiJS 3.0 + Ant Design Pro 4.0 来构建一个基础的模板。

yarn create umi

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.

复制代码

Ant Design Pro 脚手架将会自动安装，安装完依赖之后，一个基础框架就完成了，此章终结。

自定义模块

删除全球化

一般来说，Ant Design Pro 的国际化在大部分团队意义不大，所以可以先删除，后期有需求再进行添加。

先