工作需求记录：关于要分别打包 mgop 和 axios 情况下的构建

因为会同时上架浙里办和其他平台，所以打包的时候需对应不同平台打包不同的接口。浙里办用 mgop，其他用 axios

改写接口类

原先用的是封装了 axios 的 AxiosApi 类，类中有函数 get,post 浙里办的接口新封了一个 MgopApi 类，类中有函数 get,post 它们的接口 URL 是不同的。axios 是正常的 url，而 mgop 是配置好的字符串 AxiosApi 和 MgopApi 中的函数入参相同，返回均为 Promise

方案 1 ：适配器模式

创建 BaseApi 类作为适配器
通过 node 环境变量注入来判断是适配 AxiosApi 还是 MgopApi
在 BaseApi 中定义 post , get 函数，原先的 url 入参为字符串，现改为对象{axiosUrl,mgopUrl}
通过环境变量定义使用的哪个 url 属性
调用生成类的相应函数代码实现：

import AxiosApi from "./AxiosApi";
import MgopApi from "./MgopApi";
class BaseApi {
  baseService;
  urlPropertyName;
  constructor() {
    this.baseService =
      process.env.APP_API_TYPE === "mgop" ? new MgopApi({ baseURL: "https://xxxxx" }) : new AxiosApi({ baseURL: `${process.env.APP_BASE_URL}` });
    this.urlPropertyName = process.env.APP_IS_MGOP === "mgop" ? "mgopUrl" : "axiosUrl";
  }
  get(url, ...args) {
    if (url[this.urlPropertyName]) {
      return this.baseService.get(url[this.urlPropertyName], ...args);
    }
  }
  post(url, ...args) {
    if (url[this.urlPropertyName]) {
      return this.baseService.post(url[this.urlPropertyName], ...args);
    }
  }
}
export default new BaseApi();

环境变量

至此需求是实现了，但是每次改环境变量太麻烦了，所以希望在 scripts 中定义好了，通过命令来确定是打包 axios 还是 mgop。这是目前的 scripts

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --progress --config ./build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.js",
},

方案 1 ：直接再写两个 webpack 配置文件

🙊🙊 简单粗暴但好不优雅

方案 2 ：cross-env 注入

dev build : 构建 axios 的
dev:mgop build:mgop : 构建 mgop 的

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --progress --config ./build/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.prod.js",
    "dev:mgop": "cross-env NODE_ENV=development API=\"mgop\" webpack serve --progress --config ./build/webpack.dev.js",
    "build:mgop": "cross-env NODE_ENV=production API=\"mgop\"  webpack --config ./build/webpack.prod.js",
  },

碎碎念

为什么不用布尔值呢，因为怕以后会出现第三种接口情况。
但是应该不会出现 mgop 和 axios 同时用的情况吧？不会吧不会吧不会吧。
除浙里办外的环境肯定是用不到 mgop 的
但是浙里办内可能就不好说了~如果出现这种情况，应该会再写个 AllApi 类 🙈🙈 好不优雅

工作需求记录：关于要分别打包 mgop 和 axios 情况下的构建 ​

改写接口类 ​

方案 1 ： 适配器模式 ​

环境变量 ​

方案 1 ： 直接再写两个 webpack 配置文件 ​

方案 2 ：cross-env 注入 ​

碎碎念 ​