我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

关于要分别构建使用mgop和axios的包

因为会同时上架浙里办和其他平台，所以打包的时候需对应不同平台打包不同的接口。浙里办用mgop，其他用axios。并且不同平台的代码是放在不同服务器上的。

改写接口类

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

创建一个新的类作为入口

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

代码实现：

import AxiosApi from "./AxiosApi";
import MgopApi from "./MgopApi";
class BaseApi {
  baseService;
  urlPropertyName;
  constructor() {
    // 初始化的时候通过环境变量确认new AxiosApi还是MgopApi
    this.baseService =
      process.env.APP_API_TYPE === "mgop"
        ? new MgopApi({ baseURL: "https://xxxxx" })
        : new AxiosApi({ baseURL: `${process.env.APP_BASE_URL}` });
    // 确认获取url.mgop 还是url.mgopUrl 
    this.urlPropertyName = process.env.APP_API_TYPE === "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();

使用：

import api from "@/libs/BaseApi";
export function areaLogin(idNum) {
  return api.post({ mgopUrl: "mgopUrlString", axiosUrl: "/api/login" }, { idNum: idNum }, true);
}

环境变量

至此需求是实现了，但是每次改环境变量太麻烦了，所以希望在 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",
  },

在webpack配置中获取到命令中的API，并注入全局

new webpack.DefinePlugin({
  "process.env": {
    .....
    APP_API_TYPE: `'${process.env.API}'` || '"axios"',
  },
}),

结尾

为什么APP_API_TYPE不用布尔值呢，因为怕以后会出现第三种接口情况。
但是应该不会出现mgop和axios同时用的情况吧？不会吧不会吧不会吧。
浙里办外的环境肯定是用不到mgop的，但是浙里办内可能会用到axios，这种情况的接口可以直接用AxiosApi生成的类。

关于分别构建使用mgop和axios的包