UmiJS简介

UmiJS是国内阿里开源的一款基于React的前端框架。我们知道使用React开发时，从头手动搭建一个工程是比较耗费精力的，这涉及到组件的选型、版本号兼容、各种复杂配置等诸多问题，而UmiJS整合了React生态中的大部分常用组件，比如预处理样式、路由、数据流、WebPack等，提供了统一的接口给我们使用，让React工程的搭建一下子变得简单了起来。

目前UmiJS的最新版本是Umi4，我们这里以最新版本为例进行介绍。

官方文档：https://umijs.org

同类技术对比

和UmiJS可以放在一起比较的框架其实有很多，比如React官方提供的CRA（Create React App）和NextJS。

CRA自带的功能比较少，它只解决了搭建React工程中最困难的那一步，但许多开发中常用的组件还是需要自己集成，踩过许许多多坑才能使用，后续升级更是个大问题。此外CRA还有一个比较坑的地方就是设计的有些过于理想化了，默认没有暴露什么配置，暴露配置需要执行官方不推荐的eject操作，然而要实现某些功能又不得不eject出配置文件，让人纠结。

NextJS是一个比较成熟的全栈框架，个人认为NextJS是非常不错的选择。NextJS有着最新最现代化的特性，API设计人性化，而且官方文档十分详细。但它也有很多让人不太适应的地方，比如混合的渲染方式、文件路由等，对于只做过纯前端CSR的开发人员来说难以理解，此外NextJS迭代快但在国内用的却比较较少，因此没有中文文档。

当然UmiJS也有很多缺点。UmiJS显然是一个商业公司内部使用只是顺带“开源”的框架，对外文档写的语焉不详，时不时会有bug，最糟的是UmiJS这个框架有一些奇奇怪怪的约定而且没有写在文档里，一旦你的某个变量名或是文件名触发了这个约定就会掉进坑里，解决问题基本靠搜索引擎、查其他人写的例子以及搜Github的Issue，总之坑点也是非常多。

因此React初学者直接使用CRA就行了，UmiJS的存在意义是提供一个大而全的参考，学完React之后正式开发一个项目时再考虑折腾UmiJS，一边研究UmiJS一边搭建我们自己的框架。

工程搭建

Umi4要求NodeJS版本为14或以上，因此我们需要确保当前环境满足要求，国内还需要配置npm镜像等操作，具体可以参考NodeJS和npm相关章节，这里就不多介绍了。

搭建一个工程，首先需要创建一个工程文件夹，然后在文件夹内执行以下命令。

npx create-umi

运行命令后，会有一些选项需要我们选择，我们这里工程模板选择Simple App，包管理器使用默认的npm。

这样我们就创建好了一个UmiJS项目，注意UmiJS默认创建的工程模板使用TypeScript进行开发，虽然我们也可以改为使用JavaScript进行开发但不推荐。

运行工程

模板工程已经是可运行的状态了，我们可以直接执行以下命令运行。

npm run dev

执行后可以看到如下输出。

如果编译没有问题，我们可以使用浏览器访问http://localhost:8000，查看示例页面。

umi命令行工具

UmiJS工程内实际上安装了一个umi命令行工具用来管理工程，比如npm run dev实际上执行的就是umi dev，除此之外umi命令还有一些其它功能。

查看帮助信息。

umi help

查看插件列表。

umi plugin list