發佈 umi 2.0，可插拔的企業級 react 應用框架

距離 umi 1.0 發佈 已有半年，umi 在這段時間作了大量的重構和改進，438 個 commit，20 個 beta 版本，今天正式發佈 2.0 版本，並調整定位爲可插拔的企業級 react 應用框架。

umi 是什麼？

umi，中文可發音爲烏米，是一個可插拔的企業級 react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各類進階的路由功能，並以此進行功能擴展，好比支持路由級的按需加載。而後配以完善的插件體系，覆蓋從源碼到構建產物的每一個生命週期，支持各類功能擴展和業務需求，目前內外部加起來已有 50+ 的插件。

umi 是螞蟻金服的底層前端框架，已直接或間接地服務了 600+ 應用，包括 java、node、H5 無線、離線（Hybrid）應用、純前端 assets 應用、CMS 應用等。他已經很好地服務了咱們的內部用戶，同時但願他也能服務好外部用戶。

他包含如下特性：

• 📦 開箱即用，內置 react、react-router 等
• 🏈 類 next.js 且功能完備的路由約定，同時支持配置的路由方式
• 🎉 完善的插件體系，覆蓋從源碼到構建產物的每一個生命週期
• 🚀 高性能，經過插件支持 PWA、以路由爲單元的 code splitting 等
• 💈 支持靜態頁面導出，適配各類環境，好比中臺業務、無線業務、egg、支付寶錢包、雲鳳蝶等
• 🚄 開發啓動快，支持一鍵開啓 dll 和 hard-source-webpack-plugin 等
• 🐠 一鍵兼容到 IE9，基於 umi-plugin-polyfills
• 🍁 完善的 TypeScript 支持，包括 d.ts 定義和 umi test
• 🌴 與 dva 數據流的深刻融合，支持 duck directory、model 的自動加載、code splitting 等等

2.0 有什麼改進？

輕內核 + 新手友好

umi@1 內置了不少優化方案，好比按需編譯、按需加載、eslint、pwa、antd 校驗等等，這些方案能提高開發體驗和運行效率，但同時也提高了入門 umi 的門檻。

因此 umi@2 默認關掉了不少優化方案：

• 按需編譯
• 按需加載
• serviceWorker
• antd
• ...

而後把這些功能改由插件來實現，按需開啓，以保證 umi 內核的輕量。同時，默認構建只產生 index.html、umi.js 和 umi.css，對新手來講部署更友好。

全新的插件機制

umi@1 的插件機制有點過於強大，什麼都能作，什麼都能改。因此 umi@2 重構了插件機制，作了不少約束，明確什麼能作，什麼不能作，並提供了一套更友好的插件 API。

同時，這套插件機制已在內部得以驗證，由超過 30 個插件構成的很是優秀的內部框架 Bigfish 正在服務於螞蟻金服，包含埋點、後端接入、性能、服務接入、權限等等。

umi-plugin-react

umi@1 的插件比較散，使用時一般須要安裝多個插件，升級和使用都比較麻煩，因此咱們提供了 umi-plugin-react。umi-plugin-react 是插件集，相似 babel 裏 preset 的概念。

目前有內置了 13 個插件，包含：

• dva 整合
• antd 整合
• routes 修改
• 一鍵兼容 ie9
• 約定式的 i18n 方案
• 切換 react 到 preact 或其餘類 react 庫
• 路由級的按需加載，可定製按需的路由等級
• 經過 dll 提速
• 經過 hardSource 提速
• pwa
• 啓用高清方案
• 啓用 fastClick
• 支持配置 title

詳見：umijs.org/zh/plugin/u…

webpack@4 + babel@7 + ...

趁 umi@2 的機會，咱們把主要依賴度升級到了最新，除了 webpack@4 和 babel@7，還有 less@三、postcss@七、typescript@3 等，以及帶來相關的構建性能提高。

同時，咱們用了 webpack-chain 來擴展 webpack 配置，這是相比以前的 webpack.config.js 更爲穩妥的方案。

好比：

export default {
  chainWebpack(config, { webpack }) {
    // 設置 alias
    config.resolve.alias.set('a', 'path/to/a');
  
    // 刪除進度條插件
    config.plugins.delete('progress');
  },
}
複製代碼

umi generate

umi@2 支持 umi generate（umi g） 命令快速生成文件，

$ umi g page index
複製代碼

同時 umi generate 是可被擴展的，好比 umi-plugin-dva 就基於此擴展了 dva:model 等文件的快速生成。

其餘改進

• 支持經過 .env 和 .env.local 配置環境變量
• 約定式路由支持經過 yaml 格式的註釋擴展路由信息
• 改進 umi dev 404 頁面
• 基於 react-loadable 實現 umi/dynamic
• umi test，容許指定測試文件，以及透傳參數給 jest-cli
• umi test 支持 webpack 別名
• umi dev 支持配置 https 證書
• umi dev 提取樣式，而後利用 css-hot-loader 作熱更新，和 umi build 保持一致
• 默認開啓 es5ImcompatibleVersions
• 刪除性能消耗大戶 case-sensitive-paths-webpack-plugin
• 添加 webpack alias @，指向 src 目錄
• 優先使用本地的 umi 運行

快速上手

入門 umi 很簡單，

# 安裝
$ yarn global add umi # 或者 npm install -g umi

# 新建應用
$ mkdir myapp && cd myapp

# 新建頁面
$ umi generate page index

# 本地開發
$ umi dev

# 構建上線
$ umi build
複製代碼

詳見：umijs.org/zh/guide/ge…，也能夠觀看 10 分鐘入門 umi 視頻版。

升級到 umi@2

目前，antd 社區的 antd-pro 和 antd-admin 都已升級到 umi@2，以前 umi@1 的項目可參考文檔或視頻進行升級。

社區

你們能夠加釘釘羣。

也能夠加微信羣（羣滿 100 人，加 sorryccpro 好友備註 umi 邀請加入）。

最後

感謝全部參與貢獻 umi 以及在項目中使用了 umi 的內外部同窗。umi 纔剛剛起步，很但願你能一塊兒來完善他，咱們 Github 見！👋