1 项目依赖相关

安装依赖

根据根目录lock文件确定依赖安装范式，通常ide也会有UI提示，点击即可
一般为yarn.lock yarn install 或 package-lock.json npm install
npm yarn pnpm 是前端包管理器 不用过多关注
jetbrain系列ide 直接 打开 package.json[scripts=>start] 点击左侧箭头

launch

node版本

尽量不要用太新版本的node 如果老旧项目[比如mgt] 可能还需要node 14以下版本， 否则依赖可能会出问题
此处推荐一个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

本地开发

环境相关

常规约定：本地开发一般在根目录建 .env.local文件 常规内容如下

SUNMI_ENV=test  # 调试环境
PORT=8000       # 服务启动端口
LOCALPROXY=true # 开启本地代理  注意true 是字符串 非空即可

文件其他名称

image.png

本地代理

跨域

1 协议、域名[二级及以上域名]、端口不同
2 特殊请求头
需要配置webpack 代理
一般在 ./config/webpack.config.js下

image.png

proxy: {
    "/v3": {
      target: `https://${getClientEnvironment().API_SERVER}`,
      secure: true, // 如果是https接口，需要配置这个参数
      changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    },
}

因webpack代理仅劫持本地的API访问 故需在请求客户端内指定代理的域名为localhost

image.png

注意事项

node 执行环境 ； 浏览器执行环境

杂项

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

业务开发相关

MGT主子应用

本地调试

主应用操作：

mgt项目./src/mfe/config 新建文件：app.local.ts内容如下：

export default [
  {
    name: 'mall-operation',      // 子应用
    entry: '//localhost:8001',   // 子应用本地调试端口
    base: ['/mall-operation']   
  }
];

回调模式

切换事件回调思维模式

早期js的异步是通过回调模式[事件回调]实现的

因为需要等待就绪状态（比如后端接口响应） 方可进行下一步操作

异步事件，某些复杂的组件（比如大表单模态框）需要在状态修改后完成渲染，此时建议使用{someState && <components>}方式来控制，否则可能会产生状态没有完全就绪，组件就已经渲染，但此时渲染的可能是错误的状态

image.png

状态管理

为什么需要状态管理

本质上是一些变量处理
页面交互状态、后端数据状态[远端数据缓存策略]

React

16.8版本前用class 组件
之后用函数组件配合hooks[推荐尽量使用函数组件]

类组件

需要关注下 props、state
还需要关注下状态管理库： redux、mobx、dva

函数组件

hooks

UI 组件库使用 antd
对着文档copy即可 注意 对应版本 2.x 5.x

类组件

this指向

来复习一下this [#手动滑稽]
类组件中需要留意this问题 [这也是推荐使用函数组件的原因之一]
多用箭头函数 [this可以指向可以向下穿透]

image.png

类组件状态管理

类组件本身的 state这里管理局部页面的状态
全局状态通过props 获取： mobx redux dva（redux封装）

image.png

页面的loading 状态由于异步处理的原因 也建议放到model层[全局状态]中

image.png
也可以用封装好的 loadding方法 [dva项目]

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

其他

项目模块化

CommonJS

● require
● module.exports
● exports

ES Module

● import
● export
● export default

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

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

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

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

export { obj,userName }


// 导入
import { obj,userName } from './module.js'

typescript