1 項(xiàng)目依賴相關(guān)

安裝依賴

根據(jù)根目錄lock文件確定依賴安裝范式，通常ide也會(huì)有UI提示，點(diǎn)擊即可
一般為yarn.lock yarn install 或 package-lock.json npm install
npm yarn pnpm 是前端包管理器 不用過多關(guān)注
jetbrain系列ide 直接 打開 package.json[scripts=>start] 點(diǎn)擊左側(cè)箭頭

launch

node版本

盡量不要用太新版本的node 如果老舊項(xiàng)目[比如mgt] 可能還需要node 14以下版本， 否則依賴可能會(huì)出問題
此處推薦一個(gè)node版本管理工具: nvm一款node多版本并存管理工具
https://github.com/nvm-sh/nvm

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

本地開發(fā)

環(huán)境相關(guān)

常規(guī)約定：本地開發(fā)一般在根目錄建 .env.local文件 常規(guī)內(nèi)容如下

SUNMI_ENV=test  # 調(diào)試環(huán)境
PORT=8000       # 服務(wù)啟動(dòng)端口
LOCALPROXY=true # 開啟本地代理  注意true 是字符串 非空即可

文件其他名稱

image.png

本地代理

跨域

1 協(xié)議、域名[二級(jí)及以上域名]、端口不同
2 特殊請(qǐng)求頭
需要配置webpack 代理
一般在 ./config/webpack.config.js下

image.png

proxy: {
    "/v3": {
      target: `https://${getClientEnvironment().API_SERVER}`,
      secure: true, // 如果是https接口，需要配置這個(gè)參數(shù)
      changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
    },
}

因webpack代理僅劫持本地的API訪問 故需在請(qǐng)求客戶端內(nèi)指定代理的域名為localhost

image.png

注意事項(xiàng)

node 執(zhí)行環(huán)境 ； 瀏覽器執(zhí)行環(huán)境

雜項(xiàng)

.npmrc文件可以配置鏡像源
某米私有鏡像源地址：https://registry.npm.--.com/

業(yè)務(wù)開發(fā)相關(guān)

MGT主子應(yīng)用

本地調(diào)試

主應(yīng)用操作：

mgt項(xiàng)目./src/mfe/config 新建文件：app.local.ts內(nèi)容如下：

export default [
  {
    name: 'mall-operation',      // 子應(yīng)用
    entry: '//localhost:8001',   // 子應(yīng)用本地調(diào)試端口
    base: ['/mall-operation']   
  }
];

回調(diào)模式

切換事件回調(diào)思維模式

早期js的異步是通過回調(diào)模式[事件回調(diào)]實(shí)現(xiàn)的

因?yàn)樾枰却途w狀態(tài)（比如后端接口響應(yīng)） 方可進(jìn)行下一步操作

異步事件，某些復(fù)雜的組件（比如大表單模態(tài)框）需要在狀態(tài)修改后完成渲染，此時(shí)建議使用{someState && <components>}方式來控制，否則可能會(huì)產(chǎn)生狀態(tài)沒有完全就緒，組件就已經(jīng)渲染，但此時(shí)渲染的可能是錯(cuò)誤的狀態(tài)

image.png

狀態(tài)管理

為什么需要狀態(tài)管理

本質(zhì)上是一些變量處理
頁面交互狀態(tài)、后端數(shù)據(jù)狀態(tài)[遠(yuǎn)端數(shù)據(jù)緩存策略]

React

16.8版本前用class 組件
之后用函數(shù)組件配合hooks[推薦盡量使用函數(shù)組件]

類組件

需要關(guān)注下 props、state
還需要關(guān)注下狀態(tài)管理庫： redux、mobx、dva

函數(shù)組件

hooks

UI 組件庫使用 antd
對(duì)著文檔copy即可 注意 對(duì)應(yīng)版本 2.x 5.x

類組件

this指向

來復(fù)習(xí)一下this [#手動(dòng)滑稽]
類組件中需要留意this問題 [這也是推薦使用函數(shù)組件的原因之一]
多用箭頭函數(shù) [this可以指向可以向下穿透]

image.png

類組件狀態(tài)管理

類組件本身的 state這里管理局部頁面的狀態(tài)
全局狀態(tài)通過props 獲?。? mobx redux dva（redux封裝）

image.png

頁面的loading 狀態(tài)由于異步處理的原因 也建議放到model層[全局狀態(tài)]中

image.png

loading={loading.effects['noticeManage/getListTodo']}

其他

項(xiàng)目模塊化

CommonJS

● require
● module.exports
● exports

ES Module

● import
● export
● export default

// 導(dǎo)出
module.exports = {
    name:'banana',
    age:18,
    eat:function(){
        console.log('I like eating bananas')
    }
}
module.exports.userName = 'admin'

//  導(dǎo)入
const obj = require('./module.js')
console.log(obj) // { name: 'banana', age: 18, eat: [Function: eat], userName: 'admin' }

// ------------------------------------

// 導(dǎo)出
const obj = {
    name:'banana',
    age:18,
    eat:()=>{
        console.log('I like eating bananas')
    }
}
const userName = 'admin'

export { obj,userName }


// 導(dǎo)入
import { obj,userName } from './module.js'

typescript