Hello！umi

1、

umi（中文名：五米）是我目前的工做重點，正在全力開發中，從寫下第一行代碼開始算起已有數月。但從閒聊和郵件中發現很多人還不能準備地理解 umi 是啥、能作啥，因而趁着代碼寫累了，聊聊 umi 的一些狀況。

umi 是工具嗎？是。但不只僅是。我給 umi 的定位是開發框架，目前包含工具 + 路由，不包含數據和視圖。 因此 umi[工具 + 路由] + dva[數據] + antd(-mobile)[視圖]，很配哦。另外，umi 目前基於 React，不支持 Vue 和其餘框架或者無框架的開發方式。

前面說的目前，實際上是精力有限。

 

2、

你們可能會以爲，umi 有啥特別的，工具用 webpack + webpack-dev-server + babel + postcss + ... ，路由用 react-router 不就完了嗎？

這是上一代的使用方式，工具是工具，庫是庫，涇渭分明。而近來，咱們發現工具和庫其實能夠糅合在一塊兒，工具也是框架的一部分。 經過約定、自動生成和解析代碼等方式來輔助開發，減小開發者要寫的代碼量。next.js 如此，umi 也如此，Compilers are the New Frameworks 。

 

3、

那麼，爲啥要把路由層作進去？

路由即頁面，而頁面是構成應用的單位。接管了路由層，意味着更多的可能性，能夠管控每一個頁面的生成、切換、銷燬等。框架能作的事情多了，才更有存在的意義。

好比：

• 一鍵切換單頁多頁
• 運行時按需加載
• 開發時按需編譯
• 靜態 HTML 的生成
• ...

 

4、

因此，umi 有啥？我爲何要用？

簡單來講，有如下 4 點：

• 🗃 開箱即用
• 🚀 極快
• ⚔️ 多端
• 😊 開發友好

（沒了？🏃🏃🏃 先別走，聽我細細道來。。）

 

5、

開箱即用？那麼箱子裏有啥？

咱們來對比下，以 roadhog 初始化一個項目爲例。

roadhog：

1. 安裝構建工具依賴 roadhog
2. 安裝類庫依賴，有 antd/antd-mobile、react + react-dom (或者 preact + preact-compat) 依賴
3. 若是是 preact 項目，須要配 alias
4. 若是須要路由，還須要安裝 react-router
5. 安裝 babel 插件 babel-plugin-import，並按文檔配置，但可能配出錯（此塊諮詢很是多）
6. 配置 webpack entry，打包多頁

umi:

1. 安裝依賴 umi

只需一步，剩下的都不用作，由於在 umi 這個箱子裏了。 不過不少東西雖然已經在了，但仍保留讓用戶選擇的權利，好比選擇 preact 仍是 react，好比 antd(-mobile) 的版本，eslint 規則可覆蓋可 merge 等等。

 

6、

umi 在性能上作了不少努力，這些對於開發者是無感知的。「你只管寫業務代碼，我會負責性能」，而且隨着 umi 的迭代，我保證你的應用會愈來愈快。

主要有：

• PWA Support
• Tree Shake
• antd(-mobile) 啓用 ES Module
• Scope Hoist
• 公共文件的智能提取
• 頁面級的按需加載
• Inline Critical CSS
• 提供 umi/dynamic 和 import() 語法，分別用於懶加載組件和模塊
• 優化的 babel-preset-umi
• 靜態化的 SSR 處理
• link rel=preload
• hash 構建及服務端支持（雲鳳蝶）
• 經過 react-constant-elements 和 react-inline-elements 提高 rerender 性能
• 一鍵切換到 preact
• Progressive image loading
• 按需打包 umi 內置的路由代碼
• ...

優化點不少，有些關乎尺寸，有些關乎執行效率，有些關乎首屏時間，有些關乎用戶體驗，細聊的話，能說上幾個小時。你們根據關鍵字應該能猜個大概，這裏就不展開了。

 

7、

umi 就是爲多端而生的，這裏的多端指的是 web + 各類容器，好比說咱們須要同時把代碼部署到支付寶錢包的離線包和在線服務器。

由於 umi 的產物是單頁應用，同時單獨訪問每一個頁面又都有效，因此能夠在容器模式裏經過 ap 進行跳轉，在線模式下又經過路由跳轉。模式的自動切換，咱們是藉助 bridgex 進行實現。

 

8、

umi 在開發體驗上也算得上是嘔心瀝血了。

首先，藉助 create-react-app 的開源庫，他的體驗是咱們的底線。像是 redbox 顯示出錯信息、HMR、出錯點擊後跳轉到 IDE、ESLint 出錯提示等等。

此外，umi 還作了更多：

• 按需編譯（就算你有 100 個頁面，啓動也只需 5 秒）
• 全部的配置都能自動生效（熱更新或自重啓）
• 動態改 antd(-mobile) 主題
• dev server 斷線重連
• 配置項校驗和提醒（同時出如今瀏覽器和控制檯裏）
• 配置文件語法錯誤提示到行
• TypeScript 支持（語法提示、TSLint，連測試用例也支持用 ts 寫）
• ...

 

9、

什麼樣的項目適合用 umi ？

umi 是通用方案，我能說什麼類型的都適用嗎？😆 好吧，我說說什麼項目不適用吧。

• 非 React 項目
• 路由及其複雜，不能經過目錄路由約定實現的（後續會考慮配置類型的路由）
• 不在意產出物性能的
• 不關注開發體驗的
• ...

 

10、

有點心動了，我該如何開始 Getting Started 呢？

先安裝 umi。

$ npm i umi -g

# 檢查版本號
$ umi -v
umi@1.0.0-rc.1
複製代碼

而後新建目錄並進入。

$ mkdir myapp
$ cd myapp
複製代碼

啓動 umi 的 dev 服務器。

$ umi dev
複製代碼

新開個 terminal，在 pages 目錄下新建 page component 。

$ echo 'export default () => <div>Index Page</div>' > pages/index.js
複製代碼

在瀏覽器中打開 http://localhost:8000/，你會看到 Index Page 。

簡單吧！

---

最後，umi@1.0 將於 2 月初正式發佈，敬請關注。

---

相關連接：

• umi@github
• 官網
• 文檔

（完）