umi-ui是在umi基礎上擴展的umi-ui插件，主要是用於快速開發后台管理系統。
umi-ui啟動順序
1. node ./scripts/ui.js
2. **打包**3個ui插件： plugin-ui-blocks/plugin-ui-tasks/preset-ui
3. 運行ui界面 ui/web
4. 客戶端： 運行界面 packages/ui/web 執行app.ts render方法初始化
1. 獲取三方靜態資源
2. 初始化socket
3. 獲取項目列表
4. 如果是task路由 則表示打開一個項目
5. 初始化ui插件的api一系列方法，用於拓展ui第三方插件
5. 服務端： packages/preset-ui/src/index.ts 引用了ui、task、blocks等插件 依次執行
## umi插件機制
1. preset-ui 作為umi的插件運行 (umi-ui暫時只能伴隨項目啟動，還沒有做到全局啟動)
2. 創建UmiUI實例（初始化socket和一系列針對web傳過來的socket請求的處理）
3. 加載task、block插件
## umi-ui插件
UI 插件與普通 Umi 的插件實際是一樣的原理。
只是比一般的 Umi 插件，多使用兩個 API：
- `api.addUIPlugin` 用於加載 ui 的 umd 包
- `api.onUISocket` 為前端 ui 提供服務端接口
## 如何開放接口供第三方插件插件使用
1. umi會調用插件的入口文件，通過傳參的形式
## ui-blocks插件
1. 通過window.postMessage通信
2. 通過babel插件，來注入一系列代碼
## 用到的 package
1. yeoman-generator 腳手架生成工具
2. resolve-from 解析文件路徑
3. binary-mirror-config 獲取國內鏡像配置
4. cross-spawn 同node spawn 只是做了跨平台兼容
5. execa 同node exec
6. glob 根據路徑規則獲取匹配到的所有文件路徑
7. sylvanas 將ts文件轉化為js文件
8. sort-package-json 可以刪除掉空行並且排序
9. prettier 格式化文件
10. mem-fs mem-fs-editor 拷貝文件
11. babel系列包
12. mustache
## 工具
1. lerna + yarn workspaces 的 monorepos項目
2. babel插件編寫
## 項目啟動流程及插件加載調用
1. 項目本身暫時是作為umi插件啟動，后期作者會改為全局包
2. 入口文件：preset-ui(依次調用)
1. registerMethods.js注冊umi-ui新方法（addUIPlugin/ui界面, onUISocket/serve服務端:主要處理websocket請求）
2. 啟動umi-ui主界面及服務(開發調試socket服務在3000， 頁面在8002會跨域，所以通過routes/common代理)
3. addBubble umi-ui輔助工具
4. 引入ui插件
3. 加載插件（tasks、blocks）addUiPlugin(解析ui插件文件)) onUISocket（websocket處理服務）
4. UI界面是調用插件的? 獲取插件umd文件，通過eval執行並傳遞PluginAPI參數
## task插件
### 創建項目
1. 安裝umi-ui生成器
2. 安裝依賴，進入create-umi通過generator生成項目
3. 根據模板package.json刪除多余的文件，或者ts文件轉化為js文件
### 啟動項目
1. 使用了dva的數據流，調用exec執行任務，向后端發送callRemote請求
2. 后端接受請求並執行項目scripts腳本
3. terminal通信：
1. 通過runCommand返回的子進程對象獲取log
2. 觸發監聽事件：TaskEventType.STD_OUT_DATA
3. send（websocket）方法發送log到客戶端
4. 由於發送日志的type在serve沒有聲明，客戶端是通過監聽listenRemote獲取到log
5. 獲取到客戶端terminal元素寫入log
## blocks插件
### 插入資產（babel插件）
1. 注入GUmiUIFlag全局組件（babel插件）
2. 插入區塊
1. 解析 url => git 地址
2. 如果不存在，則 git clone 到本地臨時目錄
3. git pull 更新到最新分支
4. 依賴處理，處理依賴沖突、依賴安裝、依賴寫入
5. 寫區塊到項目目錄中（nodeJs copy 到目標路徑）
6. 寫路由改文件內容（babel插件）