umi3 如何管理model_浅谈umi3的微内核体系

利益无关，恰好看到umi3发布了，其中的微内核特性挺吸引个人，因而就趁机看了一下，一探究竟。最近一次据说微内核仍是鸿蒙系统，虽然还没看到影子。。。javascript

插件体系

umi3的代码组织的主要核心就是插件体系，插件驱动整个内核运转，跟webpack有点像，可是又借鉴了babel的配置方式，有preset和plugin，其中preset里面又能够嵌套preset和plugin，在运行的时候会同时扫描umi配置文件、传入的opts配置、pkg的配置、process.env等等去读取插件，umi3从编译、打包到cli的运转都是经过运行插件去完成这一些的功能，对于它自身的核心包而言，就是负责去管理注册调度这些插件，你能够认为它整合核心是很是小的，离开了插件，甚至不少内置的api没办法调用。css

插件管理

umi3的插件完成的功能很是多，同时也管理很好。整个插件的调用管理采用状态机的方式，就是你在当前阶段只能完成某些操做，例如注册plugin和preset就只能在插件注册和pereset注册的阶段，其余状况下是不容许注册的。java

插件能够干什么

插件还能够校验配置，校验的配置是挂载在插件下的，这样具体的插件文件只能加一个校验配置，虽然有些限制，可是咱们能够配置多个插件啊，逃：)。配置的校验是在读取配置的时候，遍历全部插件，而后根据当前配置的key去查看当前插件是否有校验配置，若是有，就进行配置的校验。在内部初始化插件的时候，会调用插件方法，插件方法自己可能会经过注入hook和method等，其中注入的hook是相当重要的，由于在applyPlugin的时候，说白了，就是去触发咱们经过插件注册的hook。其中，触发的时候，会由于触发类型的不一样，例若有add、modify、event三种，不一样类型触发hook的方式会致使相同key的hooks(复数)调用的方式不一样，可能concat返回值或者modify等等，这些借助于webpack的tapable去组织。webpack

例如，umi dev这个命令，就是注册dev的command，而后在你调用umi dev的时候，调用你传入的方法，去初始化.umi文件夹，调用bundler编译等等。除了内置插件外，其余功能，你均可以经过添加插件或者本身编写插件去完成。

web

再讲两点

再讲两点，在umi3的新版本里面看到两个特性，支持 路由组件的导出扩展属性和css智能模块化，这里就顺便再讲下。api

css智能模块化

umi3中css能够智能被是否须要模块化，原理很简单，经过ast分析，以下的代码中import中，specifiers的长度不为空，其中一项为style，那么咱们须要改造一下sourcebabel

import style from '.a.scss'

复制代码

在source.value添加modules的loader，source.value = ${value}?${opts.flag || 'modules'};，改造以后的代码以下，默认是modules，固然咱们还能够传入opts.flag传入本身自定义的loaderapp

import style from '.a.scss?modules'

复制代码

支持路由组件的导出扩展属性

好比按照如下这么写，路由上会多一个 title 属性，这个umi3发布中提到的一个功能，具体怎么实现呢？模块化

function HomePage(){

return

Home Page

;

}

HomePage.title = 'Home Page';

export default HomePage;

复制代码

原理很简单，经过分析AST，找到默认导出,再找到全部的表达式，若是表达式是赋值表达式，并且左边是对象，右边的赋值是字符串、数字、布尔值，则把属性导出来。spa

对umi3的理解暂时就这么多，可能有理解误差或者鄙陋，欢迎指出。