自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇非常 Nice 的 UmiJS 教程

作者：佚名
開發(fā) 前端
網(wǎng)上的umi教程是真的少,很多人都只寫了一點(diǎn)點(diǎn)，很多水文,所以打算自己寫一篇,自己搭建umi,并封裝了一下常用的功能,并用到公司實(shí)際項(xiàng)目中。

[[437884]]

 前言

網(wǎng)上的umi教程是真的少,很多人都只寫了一點(diǎn)點(diǎn)，很多水文,所以打算自己寫一篇,自己搭建umi,并封裝了一下常用的功能,并用到公司實(shí)際項(xiàng)目中.

umi介紹

Umi 是什么？

Umi，中文可發(fā)音為烏米，是可擴(kuò)展的企業(yè)級前端應(yīng)用框架。Umi 以路由為基礎(chǔ)的，同時(shí)支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。

Umi 是螞蟻金服的底層前端框架，已直接或間接地服務(wù)了 3000+ 應(yīng)用，包括 java、node、H5 無線、離線（Hybrid）應(yīng)用、純前端 assets 應(yīng)用、CMS 應(yīng)用等。他已經(jīng)很好地服務(wù)了我們的內(nèi)部用戶，同時(shí)希望他也能服務(wù)好外部用戶。

它主要具備以下功能：

  •   🎉 可擴(kuò)展，Umi 實(shí)現(xiàn)了完整的生命周期，并使其插件化，Umi 內(nèi)部功能也全由插件完成。此外還支持插件和插件集，以滿足功能和垂直域的分層需求。
  •   📦 開箱即用，Umi 內(nèi)置了路由、構(gòu)建、部署、測試等，僅需一個(gè)依賴即可上手開發(fā)。并且還提供針對 React 的集成插件集，內(nèi)涵豐富的功能，可滿足日常 80% 的開發(fā)需求。
  •   🐠 企業(yè)級，經(jīng)螞蟻內(nèi)部 3000+ 項(xiàng)目以及阿里、優(yōu)酷、網(wǎng)易、飛豬、口碑等公司項(xiàng)目的驗(yàn)證，值得信賴。
  •   🚀 大量自研，包含微前端、組件打包、文檔工具、請求庫、hooks 庫、數(shù)據(jù)流等，滿足日常項(xiàng)目的周邊需求。
  •   🌴 完備路由，同時(shí)支持配置式路由和約定式路由，同時(shí)保持功能的完備性，比如動(dòng)態(tài)路由、嵌套路由、權(quán)限路由等等。
  •   🚄 面向未來，在滿足需求的同時(shí)，我們也不會(huì)停止對新技術(shù)的探索。比如 dll 提速、modern mode、webpack@5、自動(dòng)化 external、bundler less 等等。

什么時(shí)候不用 umi？

如果你，

  •   需要支持 IE 8 或更低版本的瀏覽器
  •   需要支持 React 16.8.0 以下的 React
  •   需要跑在 Node 10 以下的環(huán)境中
  •   有很強(qiáng)的 webpack 自定義需求和主觀意愿
  •   需要選擇不同的路由方案

Umi 可能不適合你。

為什么不是？

create-react-app

create-react-app 是基于 webpack 的打包層方案，包含 build、dev、lint 等，他在打包層把體驗(yàn)做到了極致，但是不包含路由，不是框架，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包層之外也做技術(shù)收斂時(shí)，就會(huì)遇到困難。

next.js

next.js 是個(gè)很好的選擇，Umi 很多功能是參考 next.js 做的。要說有哪些地方不如 Umi，我覺得可能是不夠貼近業(yè)務(wù)，不夠接地氣。比如 antd、dva 的深度整合，比如國際化、權(quán)限、數(shù)據(jù)流、配置式路由、補(bǔ)丁方案、自動(dòng)化 external 方面等等一線開發(fā)者才會(huì)遇到的問題。

umi3項(xiàng)目初始化

環(huán)境準(zhǔn)備

首先得有 node，并確保 node 版本是 10.13 或以上。

推薦使用 yarn 管理 npm 依賴

本項(xiàng)目使用的版本為 node v14.17.5  yarn 1.22.15

腳手架

桌面新建umi3文件夾, 用vscode打開, 打開vscode終端,

執(zhí)行 yarn create @umijs/umi-app 創(chuàng)建項(xiàng)目

安裝依賴 yarn

啟動(dòng)項(xiàng)目 yarn start

配置 prettier,eslint, stylelint

umi 維護(hù)了一個(gè) prettier，eslint，stylelint 的配置文件合集 umi-fabric 

  1. yarn add @umijs/fabric -D 

根目錄新建下面三個(gè)文件,刪除.prettierrc文件

.eslintrc.js、.prettierrc.js、.stylelintrc.js

配置如下 

  1. //.eslintrc.js 配置  
  2. module.exports = {  
  3.   extends: [require.resolve('@umijs/fabric/dist/eslint')],  
  4.   // in antd-design-pro  
  5.   globals: {  
  6.     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,  
  7.     page: true,  
  8.   }, 
  9.   rules: {  
  10.     // your rules  
  11.     'prefer-const': 0,  
  12.   },  
  13. };  
  14. //.prettierrc.js 配置  
  15. const fabric = require('@umijs/fabric')  
  16. module.exports = {  
  17.   ...fabric.prettier,  
  18.   semi: false,  
  19. }  
  20. //.stylelintrc.js 配置  
  21. const fabric = require('@umijs/fabric')  
  22. module.exports = {  
  23.   ...fabric.stylelint,  
  24. } 

根目錄新建eslint忽略文件  .eslintignore 

  1. .eslintrc.js  
  2. node_modules 

在package.json 里面的lint-staged 新增 "eslint --fix"

最后你的 vscode 要安裝這三個(gè)同名擴(kuò)展插件，這時(shí)候分別去更改 js、less 文件，會(huì)發(fā)現(xiàn)已經(jīng)有風(fēng)格校驗(yàn)了。

驗(yàn)證

修改src/paegs文件夾下的index.tsx文件,新增一個(gè)a變量,有eslint錯(cuò)誤提示,說明eslint生效了

然后再單獨(dú)提交index.tsx這一個(gè)文件

會(huì)提示有錯(cuò)誤,無法提交，說明pre-commmit 鉤子生效

保存時(shí)自動(dòng)格式化代碼

在vscode設(shè)置 文本編輯器的格式化里面  勾選Format on Save

我的eslint，或者prettier 不生效？

去到終端里的輸出，找到eslint或者prettier 看他們的輸出日志，是否正常。如果有報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)信息處理問題

檢查步驟:

  •  確保安裝umi-fabric
  •  檢查配置文件是否存在
  •  vscode 得eslint 和prettier 插件是否下載
  •  確認(rèn)輸出日志，是否有報(bào)錯(cuò)

pre-commit時(shí)的lint-staged 不生效

在package.json中 我們配置了如下得代碼

意思是 在代碼commit之前 執(zhí)行prettier格式化代碼和eslint fix 如果你在提交代碼的時(shí)候沒有生效，請執(zhí)行

  1. yarn install --force 

執(zhí)行這個(gè)命令重新拉取依賴

不生效的原因？

自己剛開始也是各種google，查看文檔，也沒有找出原因，最后在umi2的一個(gè)issue里面，自己找到了答案。

原因在于我們初始化git倉庫的順序，如果我們先初始化git倉庫 然后再創(chuàng)建項(xiàng)目，再拉取依賴。是沒有任何問題的。

如果我們先創(chuàng)建了umi項(xiàng)目，拉去依賴，最后初始化git，提交代碼到git倉庫，當(dāng)我們拉去依賴時(shí)， 這是就還沒有.git 就沒有生成相關(guān)的pre-commit，所以就沒有生效。所以這時(shí)我們就只需要在重新拉取下依賴就可以了。

配置css初始化代碼

為什么要初始化css

建站老手都知道，這是為了考慮到瀏覽器的兼容問題，其實(shí)不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面差異。當(dāng)然，初始化樣式會(huì)對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是：* {padding: 0; margin: 0;} 。有很多人也是這樣寫的。這確實(shí)很簡單，但有人就會(huì)感到疑問：*號這樣一個(gè)通用符在編寫代碼的時(shí)候是快，但如果網(wǎng)站很大，CSS樣式表文件很大，這樣寫的話，他會(huì)把所有的標(biāo)簽都初始化一遍，這樣就大大的加強(qiáng)了網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載的時(shí)候需要很長一段時(shí)間。

CSS初始化是指重設(shè)瀏覽器的樣式。不同的瀏覽器默認(rèn)的樣式可能不盡相同，所以開發(fā)時(shí)的第一件事可能就是如何把它們統(tǒng)一。如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面差異。每次新開發(fā)網(wǎng)站或新網(wǎng)頁時(shí)候通過初始化CSS樣式的屬性，為我們將用到的CSS或html標(biāo)簽更加方便準(zhǔn)確，使得我們開發(fā)網(wǎng)頁內(nèi)容時(shí)更加方便簡潔，同時(shí)減少CSS代碼量，節(jié)約網(wǎng)頁下載時(shí)間。

Umi 中約定 src/global.css 為全局樣式，如果存在此文件，會(huì)被自動(dòng)引入到入口文件最前面。

src下面新建global.css,代碼如下 

  1. body,  
  2. ol,  
  3. ul,  
  4. h1,  
  5. h2,  
  6. h3,  
  7. h4,  
  8. h5,  
  9. h6,  
  10. p,  
  11. th,  
  12. td,  
  13. dl,  
  14. dd,  
  15. form,  
  16. fieldset,  
  17. legend,  
  18. input,  
  19. textarea,  
  20. select,  
  21. figure,  
  22. figcaption {  
  23.   margin: 0;  
  24.   padding: 0;  
  25. } 
  26. li {  
  27.   list-style-type: none;  
  28. }  
  29. a {  
  30.   text-decoration: none;  
  31. }  
  32. a:hover {  
  33.   text-decoration: underline;  
  34. }  
  35. img {  
  36.   border: none;  
  37. }  
  38. input {  
  39.   outline: none;  
  40. } 

配置文件

Umi 在 .umirc.ts 或 config/config.ts 中配置項(xiàng)目和插件，支持 es6。

如果項(xiàng)目的配置不復(fù)雜，推薦在 .umirc.ts 中寫配置；如果項(xiàng)目的配置比較復(fù)雜，可以將配置寫在 config/config.ts 中，并把配置的一部分拆分出去，比如路由配置可以拆分成單獨(dú)的 routes.ts

推薦兩種配置方式二選一，.umirc.ts 優(yōu)先級更高。

我們采用config的方式,刪除.umirc.ts,根目錄新建config文件夾, 在里面新建config.ts

默認(rèn)內(nèi)容如下 

  1. import { defineConfig } from 'umi';  
  2. export default defineConfig({ 
  3.   nodeModulesTransform: {  
  4.     type: 'none',  
  5.   },  
  6.   routes: [  
  7.     { path: '/', component: '@/pages/index' },  
  8.   ],  
  9.   fastRefresh: {},  
  10. }); 

多環(huán)境多配置文件

可以通過環(huán)境變量 UMI_ENV 區(qū)分不同環(huán)境來指定配置。

為了兼容性,可借助三方工具 cross-env來設(shè)置環(huán)境變量 

  1. yarn add cross-env --dev 

在package.json中的script中   

  1. "start": "cross-env UMI_ENV=dev umi dev",  
  2.    "start:test": "cross-env UMI_ENV=test umi dev",  
  3.    "start:prd": "cross-env UMI_ENV=prd umi dev",  
  4.    "build": "cross-env UMI_ENV=dev umi build",  
  5.    "build:test": "cross-env UMI_ENV=test umi build",  
  6.    "build:prd": "cross-env UMI_ENV=prd umi build", 

然后再config文件夾下 新建

config.dev.ts,config.test.ts,config.prd.ts

代表開發(fā)環(huán)境,測試環(huán)境,生產(chǎn)環(huán)境的配置文件.

config.dev.ts 

  1. import { defineConfig } from 'umi';  
  2. export default defineConfig({ 
  3.   define: {  
  4.     CurrentEnvironment: 'dev',  
  5.   }, 
  6. }); 

config.test.ts 

  1. import { defineConfig } from 'umi';  
  2. export default defineConfig({  
  3.   define: {  
  4.     CurrentEnvironment: 'test',  
  5.   },  
  6. }); 

config.prd.ts 

  1. import { defineConfig } from 'umi';  
  2. export default defineConfig({  
  3.   define: {  
  4.     CurrentEnvironment: 'prd',  
  5.   },  
  6. }); 

CurrentEnvironment 變量代表當(dāng)前的環(huán)境，后面根據(jù)不同的環(huán)境配置不同的請求地址會(huì)用到

用于提供給代碼中可用的變量,定義的變量可以全局拿到

這時(shí) 執(zhí)行 yarn start:prd,然后去到pages的index.tsx打印CurrentEnvironment.

這時(shí)需要去到根目錄的 typings.d.ts 添加 

  1. // 聲明當(dāng)前的環(huán)境  
  2. declare const CurrentEnvironment: 'dev' | 'test' | 'prd';  

然后報(bào)錯(cuò)消失 控制臺(tái)打印如下

這時(shí) 重新執(zhí)行yanr start:test 控制臺(tái)打印如下

環(huán)境變量和多環(huán)境多配置 成功

**注意點(diǎn)**:

config.ts作為配置文件時(shí)，記得刪除.umirc.ts 不然config.ts不會(huì)生效。

自定義環(huán)境變量

如果我們想自定義一個(gè)環(huán)境變量,REACT_APP_ENV. 同樣我們可以在package.json里面設(shè)置

然后我們要這樣拿到這個(gè)變量呢?

首先 我們要在config.ts 的 define 配置 

  1. define: {  
  2.     REACT_APP_ENV: process.env.REACT_APP_ENV,  
  3. }, 

然后再在根目錄的 typings.d.ts 定義

  1. declare const REACT_APP_ENV: string; 

這樣就可以以在全局中拿到和使用 REACT_APP_ENV這個(gè)環(huán)境變量了.

可以在任意組件 直接打印

  1. console.log('自定義環(huán)境變量', REACT_APP_ENV); 

系統(tǒng)自帶的環(huán)境變量

官方提供的環(huán)境變量

怎么使用?

在根目錄新建.env 環(huán)境變量配置文件

然后寫入 

  1. PORT=3000  // 表示啟動(dòng)的端口號為3000  
  2. COMPRESS = none  // 不壓縮 CSS 和 JS 

還有一些環(huán)境變量 不能配在 .env 中，只能在命令行里添加

比如 FORK_TS_CHECKER 默認(rèn)不開啟 TypeScript 類型檢查，值為 1 時(shí)啟用。 

  1. "start": "cross-env FORK_TS_CHECKER=1 UMI_ENV=dev umi dev", 

請求的封裝

src文件夾下新建 request文件夾 新建request.ts

request.ts 

  1. /**  
  2.  * 網(wǎng)絡(luò)請求工具 封裝umi-request  
  3.  * 更詳細(xì)的 api 文檔: https://github.com/umijs/umi-request  
  4.  */  
  5. import { extend } from 'umi-request';  
  6. import type { RequestOptionsInit } from 'umi-request';  
  7. import { notification } from 'antd';  
  8. // codeMessage僅供參考 具體根據(jù)和后端協(xié)商,在詳細(xì)定義.  
  9. const codeMessage = {  
  10.   200: '服務(wù)器成功返回請求的數(shù)據(jù)。',  
  11.   400: '發(fā)出的請求有錯(cuò)誤，服務(wù)器沒有進(jìn)行新建或修改數(shù)據(jù)的操作。',  
  12.   500: '服務(wù)器發(fā)生錯(cuò)誤，請檢查服務(wù)器。',  
  13. };  
  14. type mapCode = 200 | 400 | 500;   
  15. /**  
  16.  * 錯(cuò)誤異常處理程序  
  17.  */  
  18. const errorHandler = (error: { response: Response }): Response => {  
  19.   const { response } = error;  
  20.   if (response && response.status) {  
  21.     let errorText = codeMessage[response.status as mapCode] || response.statusText;  
  22.     const { status, url } = response;  
  23.     response  
  24.       ?.clone()  
  25.       ?.json()  
  26.       ?.then((res) => {  
  27.         // 后端返回錯(cuò)誤信息,就用后端傳回的  
  28.         errorText = res.msg ? res.msg : errorText;  
  29.         notification.error({  
  30.           message: `請求錯(cuò)誤 ${status}: ${url}`,  
  31.           description: errorText,  
  32.         });  
  33.       });  
  34.   } else if (!response) {  
  35.     notification.error({  
  36.       description: '您的網(wǎng)絡(luò)發(fā)生異常，無法連接服務(wù)器', 
  37.       message: '網(wǎng)絡(luò)異常',  
  38.     });  
  39.   }  
  40.   return response;  
  41. };  
  42. /**  
  43.  * 配置request請求時(shí)的默認(rèn)參數(shù)  
  44.  */  
  45. const request = extend({  
  46.   errorHandler, // 默認(rèn)錯(cuò)誤處理  
  47.   credentials: 'include', // 默認(rèn)請求是否帶上cookie  
  48. });  
  49. // 根據(jù)不同的開發(fā)環(huán)境,配置請求前綴  
  50. interface ApiPrefix {  
  51.   dev: string;  
  52.   test: string;  
  53.   prd: string;  
  54. }  
  55. const apiPreFix: ApiPrefix = {  
  56.   dev: 'http://120.55.193.14:3030/',  
  57.   test: 'http://120.55.193.14:3030/',  
  58.   prd: 'http://120.55.193.14:3030/',  
  59. };  
  60. // request攔截器, 攜帶token,以及根據(jù)環(huán)境,配置不同的請求前綴  
  61. request.interceptors.request.use((url: string, options: RequestOptionsInit) => {  
  62.   // 不攜帶token的請求數(shù)組  
  63.   let notCarryTokenArr: string[] = [];  
  64.   if (notCarryTokenArr.includes(url)) {  
  65.     return {  
  66.       url: `${apiPreFix[CurrentEnvironment]}${url}`,  
  67.       options,  
  68.     };  
  69.   }  
  70.   // 給每個(gè)請求帶上token  
  71.   let token = localStorage.getItem('tokens') || '';  
  72.   let headers = {  
  73.     Authorization: `Bearer ${token}`,  
  74.   };  
  75.   return {  
  76.     url: `${apiPreFix[CurrentEnvironment]}${url}`,  
  77.     options: { ...options, interceptors: true, headers },  
  78.   };  
  79. });  
  80. /**  
  81.  * @url 請求的url  
  82.  * @parameter 上傳的參數(shù)  
  83.  */  
  84. // 封裝的get,post.put,delete請求  
  85. const get = async (url: string, parameter?: Record<string, unknown>): Promise<any> => {  
  86.   try { 
  87.     const res = await request(url, { method: 'get', params: parameter });  
  88.     return res;  
  89.   } catch (error) {  
  90.     console.error(error);  
  91.   }  
  92. };  
  93. const deletes = async (url: string, parameter?: Record<string, unknown>): Promise<any> => {  
  94.   try {  
  95.     const res = await request(url, { method: 'delete', params: parameter });  
  96.     return res;  
  97.   } catch (error) {  
  98.     console.error(error);  
  99.   }  
  100. };  
  101. const post = async (url: string, parameter?: Record<string, unknown>): Promise<any> => {  
  102.   try {  
  103.     const res = await request(url, { method: 'post', data: parameter });  
  104.     return res;  
  105.   } catch (error) {  
  106.     console.error(error);  
  107.   }  
  108. };  
  109. const put = async (url: string, parameter?: Record<string, unknown>): Promise<any> => {  
  110.   try {  
  111.     const res = await request(url, { method: 'put', data: parameter });  
  112.     return res;  
  113.   } catch (error) {  
  114.     console.error(error);  
  115.   }  
  116. };  
  117. export default {  
  118.   get,  
  119.   post,  
  120.   put,  
  121.   deletes,  
  122. }; 

這里封裝了umi-request,統(tǒng)一處理了接口錯(cuò)誤,請求攔截器攜帶token等.最后在配合useRequest 非常的好用.

umi中使用dva

介紹

包含以下功能，

  •  內(nèi)置 dva，默認(rèn)版本是 ^2.6.0-beta.20，如果項(xiàng)目中有依賴，會(huì)優(yōu)先使用項(xiàng)目中依賴的版本。
  •  約定式的 model 組織方式，不用手動(dòng)注冊 model
  •  文件名即 namespace，model 內(nèi)如果沒有聲明 namespace，會(huì)以文件名作為 namespace
  •  內(nèi)置 dva-loading，直接 connect loading 字段使用即可
  •  支持 immer，通過配置 immer 開啟

約定式的 model 組織方式

符合以下規(guī)則的文件會(huì)被認(rèn)為是 model 文件，

  •  src/models 下的文件
  •  src/pages 下，子目錄中 models 目錄下的文件
  •  src/pages 下，所有 model.ts 文件(不區(qū)分任何字母大小寫)

實(shí)際使用

比如在src下新建 models文件夾,里面新建test.ts

test.ts 

  1. import type { Effect, Reducer, Subscription } from 'umi'; // 映入umi 定義好的ts類型  
  2. import axios from '../request/request'; // 引入封裝好的網(wǎng)絡(luò)請求  
  3. // state 接口  
  4. export interface TextModelState { 
  5.   name?: string;  
  6.   testData?: string;  
  7. } 
  8. // test model接口  
  9. export interface TextModelType {  
  10.   namespace: 'testModel';  
  11.   state: TextModelState;  
  12.   effects: {  
  13.     query: Effect;  
  14.   };  
  15.   reducers: {  
  16.     save: Reducer<TextModelState>;  
  17.     msg: Reducer<TextModelState>;  
  18.   };  
  19.   subscriptions?: { setup: Subscription };  
  20. }  
  21. const IndexModel: TextModelType = {  
  22.   namespace: 'testModel',  
  23.   state: {  
  24.     name: '初始名字',  
  25.     testData: '初始testData',  
  26.   },  
  27.   effects: {  
  28.     *query(action, { call, put }) {  
  29.       const getDataTest = async () => {  
  30.         const data = await axios.get('test'); 
  31.         return data;  
  32.       };  
  33.       let testData = yield call(getDataTest); 
  34.       yield put({  
  35.         type: 'msg',  
  36.         data: { testData: testData?.msg },  
  37.       });  
  38.     },  
  39.   },  
  40.   reducers: {  
  41.     save(state) {  
  42.       return {  
  43.         ...state,  
  44.         name: 'jimmy',  
  45.       };  
  46.     },  
  47.     msg(state, action) {  
  48.       return {  
  49.         ...state,  
  50.         testData: action?.data?.testData,  
  51.         testData2: action?.data?.testData2,  
  52.       };  
  53.     },  
  54.   },  
  55. };  
  56. export default IndexModel; 

在src/pages下的index.tsx中使用

index.tsx 

  1. import type { Effect, Reducer, Subscription } from 'umi'; // 引入umi 定義好的ts類型  
  2. import axios from '../request/request'; // 引入封裝好的網(wǎng)絡(luò)請求  
  3. // state 接口  
  4. export interface TextModelState {  
  5.   name?: string;  
  6.   testData?: string;  
  7. }  
  8. // test model接口  
  9. export interface TextModelType {  
  10.   namespace: 'testModel';  
  11.   state: TextModelState;  
  12.   effects: {  
  13.     query: Effect;  
  14.   };  
  15.   reducers: {  
  16.     save: Reducer<TextModelState>;  
  17.     msg: Reducer<TextModelState>;  
  18.   };  
  19.   subscriptions?: { setup: Subscription };  
  20. }  
  21. const IndexModel: TextModelType = {  
  22.   namespace: 'testModel',  
  23.   state: {  
  24.     name: '初始名字',  
  25.     testData: '初始testData',  
  26.   },  
  27.   effects: {  
  28.     *query(action, { call, put }) {  
  29.       const getDataTest = async () => {  
  30.         const data = await axios.get('test');  
  31.         return data;  
  32.       };  
  33.       let testData = yield call(getDataTest); 
  34.       yield put({  
  35.         type: 'msg',  
  36.         data: { testData: testData?.msg },  
  37.       });  
  38.     },  
  39.   },  
  40.   reducers: {  
  41.     save(state) {  
  42.       return {  
  43.         ...state,  
  44.         name: 'jimmy',  
  45.       };  
  46.     },  
  47.     msg(state, action) {  
  48.       return {  
  49.         ...state,  
  50.         testData: action?.data?.testData,  
  51.         testData2: action?.data?.testData2,  
  52.       };  
  53.     },  
  54.   },  
  55. };  
  56. export default IndexModel; 

mfsu

啟用 mfsu 后，熱啟動(dòng)得到 **10 倍** 提升；熱更新提升 **50%** 以上！

如何啟用

在 config/config.ts 中添加 mfsu:{}

項(xiàng)目源代碼

請點(diǎn)擊我

和兩個(gè)小伙伴一起,會(huì)根據(jù)實(shí)際運(yùn)用中出現(xiàn)的問題或者沒有考慮完善的地方,持續(xù)的更新迭代.如有問題,歡迎提Issue或者在評論區(qū)留言

FAQ

umi 不是內(nèi)部或外部命令

解決辦法

執(zhí)行 yarn global bin 拿到 bin 路徑。然后把這個(gè)路徑添加到環(huán)境變量里面的系統(tǒng)變量的path里面

如果還是不行，執(zhí)行 

  1. yarn global add umi 

如遇到更多問題，請查考

官方FAQ

官方倉庫的issue 

 

責(zé)任編輯：龐桂玉 來源： 前端大全
NiceUmiJS前端
相關(guān)推薦

2022-07-06 07:57:37

Zookeeper分布式服務(wù)框架

2018-11-01 13:20:05

Python爬蟲編程語言

2020-01-13 13:10:29

技術(shù)研發(fā)運(yùn)維

2021-05-08 09:02:48

KubeBuilderOperatork8s

2021-05-11 09:31:31

kustomizeoperator kubernetes

2021-10-14 09:58:24

消息中間件ActiveMQ Java

2021-09-18 07:43:33

ApolloJava配置中心

2021-09-15 19:05:16

數(shù)據(jù)開源項(xiàng)目

2021-07-12 06:11:14

SkyWalking 儀表板UI篇

2023-10-30 07:12:04

2022-10-26 07:39:36

MVCC數(shù)據(jù)庫RR

2022-12-19 08:14:30

注解開發(fā)配置

2022-01-02 08:43:46

Python

2021-05-20 06:57:16

RabbitMQ開源消息

2023-04-20 08:00:00

ES搜索引擎MySQL

2022-02-07 11:01:23

ZooKeeper

2021-08-01 07:19:16

語言OpenrestyNginx

2022-06-30 22:53:18

數(shù)據(jù)結(jié)構(gòu)算法

2021-08-11 07:02:21

npm包管理器工具

2021-10-11 11:08:33

HDFS快照系統(tǒng)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號