umi 是一個企業級 react 應用框架，也是螞蟻金服的底層前端框架 《螞蟻金服的前端框架和工程化實踐》 一、安裝腳手架 在創建項目之前，需要保證有 node 8.10 以上的環境 可以使用官方腳手架 create-umi 快速創建項目 首先創建一個新目錄 mkdir myapp && cd m ...
umi 是一個企業級 react 應用框架，也是螞蟻金服的底層前端框架
一、安裝腳手架
在創建項目之前，需要保證有 node 8.10 以上的環境
可以使用官方腳手架 create-umi 快速創建項目
首先創建一個新目錄
mkdir myapp && cd myapp
然後直接創建項目
yarn create umi
// 或
npm create umi
如果提示 create-umi 命令不存在，可以先執行 yarn global bin ，然後把 global bin 的路徑添加到 PATH 環境變數里
另外也可以選擇手動安裝 create-umi 並執行
$ npm install create-umi -g
$ create-umi
二、按需創建項目
選擇 app 創建一個 umi 應用
選擇是否使用 typeScript，預設不使用
然後使用空格鍵選擇需要的功能，功能介紹詳見 plugin/umi-plugin-react
這裡的 antd 和 dva 可以不用選，只要創建項目後配置相應的插件，就能在項目中內置 antd、antd-mobile 和 dva
然後就會生成如下的項目
現在可以使用 yarn start 命令啟動項目了，在瀏覽器中訪問 http://localhost:8000 可以查看預置頁面
三、配置插件
根目錄下的 .umirc.js 是整個應用的配置文件，上面提到的插件也可以在這裡配置
配置項可以寫在 .umirc.js 文件中，也可以寫在 config/config.js 文件中，二者只有一個生效
完整的配置項可以參考文檔，這裡介紹幾個比較實用的配置項：
1. proxy
const HOST_URL = '';
export default { proxy: { '/api': { target: HOST_URL, changeOrigin: true, pathRewrite: { '/api': '' }, }, }, }
2. theme
全局配置 less 變數（umi 項目預設使用 less）
export default {
theme: {
'primary-color': '#3385ff',
'font-size-base': '14px',
},
}
然後在 less 文件頂部引入
@import '~antd/lib/style/themes/default.less';
就能直接使用配置的 theme 變數了
3. routes
umi 會基於約定的 pages 目錄自動生成路由
如果更傾向於使用配置路由，可以在配置文件中單獨配置 routes
export default {
routes: [
{ path: '/', component: './a' },
{ path: '/list', component: './b', Routes: ['./routes/PrivateRoute.js'] },
{ path: '/users', component: './users/_layout',
routes: [
{ path: '/users/detail', component: './users/detail' },
{ path: '/users/:id', component: './users/id' }
]
},
],
};
配置項中的 component 路徑是從 src/pages 目錄開始解析的
⚠️註意：routes 配置項存在時則不會對 src/pages 目錄做約定式的解析，即約定式路由無法生效
4.alias
可以配置 webpack 的 resolve.alias 屬性
alias: {
'@': require('path').resolve(__dirname, './src'),
'@components': require('path').resolve(__dirname, './src/components'),
},
配置之後在 import 的時候可以使用快捷路徑
另外根目錄下有一個 webpack.config.js，這裡也有配置 alias，但這裡的 alias 不會在項目中生效
5.devServer
官方文檔上說可以配置 devServer
但實際上直接配置 devServer 是無效的
而圖上提到的 https、port 等需要使用 .env 文件來配置環境變數
BROWSER=none
ESLINT=1
PORT=9000 // 自定義本地服務埠
這裡定義的系統環境變數在整個 umi-build-dev 的生命周期里都可以被使用
四、約定目錄
umi 對於項目中的目錄有嚴格的約定，路由、model 都是基於目錄結構實現
.
├── dist/ // 預設的 build 輸出目錄
├── mock/ // mock 文件所在目錄，基於 express
├── config/
├── config.js // umi 配置，同 .umirc.js，二選一
└── src/ // 源碼目錄，可選
├── layouts/index.js // 全局佈局
├── pages/ // 頁面目錄，裡面的文件即路由
├── .umi/ // dev 臨時目錄，需添加到 .gitignore
├── .umi-production/ // build 臨時目錄，會自動刪除
├── document.ejs // HTML 模板
├── 404.js // 404 頁面
├── page1.js // 頁面 1，任意命名，導出 react 組件
├── page1.test.js // 用例文件，umi test 會匹配所有 .test.js 和 .e2e.js 結尾的文件
└── page2.js // 頁面 2，任意命名
├── global.css // 約定的全局樣式文件，自動引入，也可以用 global.less
├── global.js // 可以在這裡加入 polyfill
├── app.js // 運行時配置文件
├── .umirc.js // umi 配置，同 config/config.js，二選一
├── .env // 環境變數
└── package.json
以上的目錄除了 pages 下麵的自定義頁面文件以外，都不可以重命名
如果需要給整個項目添加一個靜態 HTML 模版，可以新建一個 src/pages/document.ejs 文件
但這個 document.ejs 文件必須包含 <div id="root"></div>
五、路由與頁面跳轉
如果採用約定式路由，pages 目錄下的頁面需要嚴格遵守相關規範
具有 $ 首碼的頁面會被識別為動態路由
pages/users/$id.js
-> path: '/users/:id'
同時具備 $ 首碼和尾碼的頁面會被識別為可選的動態路由
pages/users/$id$.js
-> path: '/users/:id?'
當目錄下存在 _layout.js 文件時，會以 _layout.js 作為基礎頁面生成嵌套路由
+ pages/
+ users/
- _layout.js
- $id.js
- index.js
以上的目錄結構會生成：
[
{ path: '/users', component: './pages/users/_layout.js',
routes: [
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
],
},
]
在頁面中可以通過 umi/router 提供的 API 跳轉頁面
import router from 'umi/router';
function goToList() {
router.push('/list');
}
或者使用 umi/link 作為組件跳轉
import Link from 'umi/link';
export default () => (
<Link to="/list">Go to list page</Link>
);
