2020 最后一篇技術(shù)文：可愛的烏咪 UmiJS
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
馬上就要告別 2020，認(rèn)真打工的一年也接近尾聲。
作為本年度最后一篇技術(shù)文（明天將發(fā)表精美水文一篇）， 我左思右想，最后選題定為 UmiJS，讀作‘烏咪’，聽起來也太可愛了。
這款 Umi 框架是集 React 各種優(yōu)勢于一身，出自阿里旗下的螞蟻金服團(tuán)隊(duì)。
| 介紹
Umi 是一個(gè)可插拔的企業(yè)級 React 應(yīng)用框架。
Umi 以路由為基礎(chǔ)，支持類 next.js 的約定式路由，以及各種進(jìn)階的路由功能，并以此進(jìn)行功能擴(kuò)展。
比如，它支持路由級的按需加載，然后配以完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求，目前內(nèi)外部加起來已有 50+ 的插件。
| 優(yōu)勢
開箱即用，內(nèi)置 react、react-router 等
類 next.js 且有功能完備的路由約定，同時(shí)支持配置的路由方式
完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期
高性能，通過插件支持 PWA、以路由為單元的 code splitting 等
支持靜態(tài)頁面導(dǎo)出，適配各種環(huán)境，比如中臺業(yè)務(wù)、無線業(yè)務(wù)、egg、支付寶錢包、云鳳蝶等
開發(fā)啟動快，支持一鍵開啟 dll 等
一鍵兼容到 IE9，基于 umi-plugin-polyfills
完善的 TypeScript 支持，包括 d.ts 定義和 umi test
與 dva 數(shù)據(jù)流的深入融合，支持 duck directory、model 的自動加載、code splitting 等等
| 快速上手
既然 Umi 優(yōu)勢如此明顯，那咱們就快速上手吧。
先全局安裝 Umi。??
npm install -g umi安裝成功之后可以使用 Umi --help 該 command 會顯示所有的配置指令，如圖：
umi build 為生成環(huán)境打包
umi dev 開啟一個(gè)開發(fā)環(huán)境下的服務(wù)
umi generate （簡寫umi g） 快速生成對應(yīng)的結(jié)構(gòu)
我們創(chuàng)建一個(gè) demo 文件夾，在該文件夾啟動終端輸入 umi g page index。
該項(xiàng)目下就會創(chuàng)建一個(gè) pages 文件夾，里面保存了我們創(chuàng)建的 index.js 頁面組件。
然后使用 umi dev 就啟動了這個(gè)服務(wù)，端口 8000。
它采用的就是文件系統(tǒng)路由，url 中輸入對應(yīng)的頁面組件名就能實(shí)現(xiàn)路由跳轉(zhuǎn)。
| Umi 腳手架
Umi 通過 create-umi 提供腳手架的功能。
我們可以通過 npm create umi projectname 來創(chuàng)建一個(gè)項(xiàng)目，然后根據(jù)自己的需要去勾選，最后會根據(jù)你的需要創(chuàng)建對應(yīng)的文件。
當(dāng)結(jié)束的時(shí)候，我們使用 npm install 安裝所有的依賴模塊。
最后 npm start 就可以跑起整個(gè)項(xiàng)目。
提醒：如果 npm install 下載不下來就換成 yarn。
在下載過程中，有個(gè) umi-plugin-react 模塊下載出錯(cuò)，建議單獨(dú)下載它，且使用 yarn 下載，即 yarn add umi-plugin-react。
當(dāng)一切都成功后在終端里 npm start 就成功開啟了服務(wù)。
對于 Umi 的學(xué)習(xí)不是三兩天就能解決的，需要持續(xù)學(xué)習(xí) Umi 的小伙伴歡迎進(jìn)入官網(wǎng)。
地址：https://umijs.org/zh-CN
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。