umi3 如何管理model_发布 UMI 3，插件化的企业级前端应用框架

自动 exclude 掉非 React Component 的路由文件，这在前面以及介绍过了。

全新的插件体系

插件体系是 Umi 最重要的基建，因为包括 Umi 内部实现也是全部由插件构成。支持 presets 和 plugins 分层，通过分层，可以更好地支持垂直域，因为把一些插件组合在一起就可以应对一个垂直域底层异步化，每一个 hook 的扩展都既可以写同步，也可以写异步，这大大增加了灵活性，也不会在出现 Umi 2 中一些带 async 后缀的接口了，比如 onBuildSuccessAsync，onStartAsync，applyPluginsAsync 等等支持调整插件和 hook 的执行顺序，执行层基于 webpack 的 tappable，所以可以很好地支持通过 before 和 stage 调整顺序支持描述启用方式，由于场景的复杂性，一种启用方式已经不能满足需求了，所以我们在内核里支持描述插件是什么条件下启用的，有挂载插件即启用、配置启用，以及通过函数自定义启用时机的

还有不少，比如支持禁用插件，插件可感知其他插件等等，还有 Umi 3 的运行态插件也做了不少改进，插件体系是个很有意思的话题，篇幅有限，后续写篇文章展开介绍下。

值得一提的是，Umi 3 的底层能力全部收敛在 @umijs/core，如果大家感兴趣，可以用相同的插件体系、配置、utils、日志等快速构建其他框架。

node_modules 走 babel 编译

按目前社区的约定，大部分工具都是不编译 node_modules 的，因为 node_modules 都默认为 es5 格式，但是有些库不这么做，所以带来了一些问题，压缩问题，uglifyjs 不识别 es6 语法，会报错旧版本浏览器兼容问题，虽然上 terserjs 不报错了，但由于 es6 语法未编译，在只能跑 es5 的旧版本浏览器里运行时会报错

为此，我们还曾整理了 es5-imcompatible-versions 来区分哪些依赖库是 es6 的，但总会有漏网之鱼，并且每次都是出现了事后补充，也带来了不少的答疑量。

所以，要彻底地解决此问题，就需要让 node_modules 下也走 babel 编译。这会让整体编译速度变慢，但由于针对 node_modules 下的 babel 插件是定制的，所以也不会慢多少。

除了能彻底解决上述问题，还能带来更多可能性。比如基于按需打补丁方案，之前没有编译 node_modules，特性收集肯定是不全的，现在就可以纳入考虑范围了。

全面拥抱 TypeScript

Umi 3 是基于 TypeScript 重写的，很多类型定义通过打包就直接导出了。

然后，如果你编写插件，现在也有了完整的 TypeScript 提示；对于最终用户来说，如果你想在写配置时也有提示，可以通过 umi 的 defineConfig 方法来定义配置，

其他

还有一些其他改进，大量依赖升级，基于全部升级到最新，babel@7.8，core-js@3，css-loader@2 等等默认无全局变量侵入，不再有 g_history、g_app、g_plugin 等等，这对于微前端来说，更容易被接入自研的 DevServer，更多可能性，比如之后某些配置项更改后只需重置 compiler 而无需重启 dev server，比如和 webpack 解绑后可接入更多构建工具一键接入 webpack 5，通过插件 @umijs/plugin-webpack-5 实现，可临时切换到 webpack 5 尝鲜，启用物理缓存后，二次启动快地飞起统一路径查起点，不管是 component、layout 还是 wrappers，全部从 pages 目录开始找起命令 umi inspect 更名为 umi webpack，可 inspect webpack 项目配置新增 umi plugin 命令，可以对插件进行 list 等操作集中管理 babel 插件，通过 @umijs/babel-preset-umi 完成，包含所有常用 babel 插件，通过配置满足不同需求

One more thing! DUMI, 嘟米，React 生态的文档工具

显然，这个命名已经透露了它和 Umi 的关系。dumi(嘟米)是基于 Umi 打造、为组件开发场景而生的文档工具，用大实话讲，dumi 就是可以用来写文档、官网和组件库 Demo 的 Umi。

没错，dumi 基于 Umi 3 打造，Umi 3 的官网基于 dumi 搭建，Umi 生态中又新添一名成员 :P

但 dumi 从发芽到现在，也不过百日，仍然有许多成长的空间，而且我们未来还有许多的想法计划将组件开发这件事做得更深，例如将 dumi 的 Demo 生产端和 Umi UI 的资产消费链路打通、为移动端组件开发打造移动端模式等等，倘若我们志同道合，真诚地邀请你和我们一起将 dumi 变得更好：https://github.com/umijs/dumi

三分钟上手 Umi

手动创建文件，