小程序根据打包命令区分不同环境的API

一般来讲项目都会有开发版、测试版和生产版这三个版本，不同版本对应不同的API域名，比如可能会是这样子：

const HOST_DEV = 'https://dev-bubuzouapi.com/'  // 开发环境API
const HOST_TEST = 'https://test-bubuzouapi.com/'  // 测试环境API
const HOST = 'https://bubuzouapi.com/'  // 生产环境API

前端项目里要如何区分用什么时候用哪个API呢？比较笨的方法是，比如这次我要打一个测试环境给测试用，那我必须手动的把 HOST_TEST 这个变量的值设置到请求的 url 里。如果下次需要打其他环境的包，那我就需要再次手动更改 url 为别的值，这样显得很不方便。

wepy-plugin-preprocess

如果你的小程序用的是 wepy 框架来构建的话，你可以用 wepy-plugin-preprocess 这个插件来对 js 进行一个预处理，可以使得每次设置到请求里的 url 的值是根据打包命令来的。

wepy-plugin-preprocess 是依赖于 preprocess 这个包的，这个包里定义了一些用于预处理的指令，比如 @if VAR='value'、@ifdef VAR、@include 这种，想要了解更多用法，请点击这里。

安装插件：

npm install wepy-plugin-preprocess --save-dev

配置wepy.config.js文件

let ENV = process.env.NODE_ENV
module.exports = {
    plugins: {
        preprocess: {
            filter: /\.js$/,
            context: { ENV }
        }
    },
}

设置package.json文件

想要区分不同的环境，就需要配置几个不同环境的打包命令。

{
    "scripts": {
        "dev": "cross-env NODE_ENV=dev wepy build --watch",
        "test": "cross-env NODE_ENV=test wepy build --no-cache",
        "prod": "cross-env NODE_ENV=prod wepy build --no-cache",
    }
}

定义常量文件

常量文件里可以定义一些项目里用到的常量，比如这里会定义 API 域名。然后把常量导出去，需要用的地方再导入即可使用这些常量。

/* @if ENV='dev' **
const HOST = exports.HOST =  'https://dev-bubuzouapi.com/'  // 开发环境API
const HOST_SOCKET = exports.HOST_SOCKET = 'wss://dev-bubuzouapi.com/'  // 开发环境socket
/* @endif */

/* @if ENV='test' **
const HOST = exports.HOST = 'https://test-bubuzouapi.com/'  // 测试环境API
const HOST_SOCKET = exports.HOST_SOCKET = 'wss://test-bubuzouapi.com/' // 测试环境socket
/* @endif */

/* @if ENV='prod' **
const HOST = exports.HOST = 'https://bubuzouapi.com/'  // 生产环境API
const HOST_SOCKET = exports.HOST_SOCKET = 'wss://bubuzouapi.com/'  // 生产环境socket
/* @endif */

通过命令切换api域名

切换成开发环境：

npm run dev  // 编译完成后请求的域名就是'https://dev-bubuzouapi.com/'

切换成测试环境：

npm run test

切换成生产环境：

npm run prod