釋出 umi 2.0，可插拔的企業級 react 應用框架

雲謙發表於2018-09-02
React框架
釋出 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@3、postcss@7、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 的專案可參考文件或視訊進行升級。

社群

大家可以加釘釘群。 釋出 umi 2.0，可插拔的企業級 react 應用框架

也可以加微信群（群滿 100 人，加 sorryccpro 好友備註 umi 邀請加入）。

最後

感謝所有參與貢獻 umi 以及在專案中使用了 umi 的內外部同學。umi 才剛剛起步，很希望你能一起來完善他，我們 Github 見！?

相關文章