cross-env 根据环境打包

Posted 2020-12-13 xguoz

cross-env GitHub地址

React 环境变量

开发中请求后端接口时，会有一个公共的请求地址（服务器域名地址 === BASEURL）。
通常情况下，开发环境、线上环境的 BASEURL 接口地址是不一样的（开发环境服务器，uat服务器，生产服务器），所以不同环境打包时就需要切换到不同环境的服务器地址。（手动修改可以，但是太麻烦，而且容易忘记）所以，正确的写法应该是，根据不同的环境变量来自动确定不同的 BASEURL。

NODE_ENV 内置环境

create-react-app 创建项目时，内置的环境变量有三个，javascript代码中可以直接通过 process.env.NODE_ENV 来读取，无需引入。

三个环境变量依次对应三个运行命令：

npm start 时, NODE_ENV 的值为 development

npm run test 时, NODE_ENV 的值为 test

npm run build 时, NODE_ENV 的值为 production

如果你的环境只有 3 个，那内置环境足够，但是有时候我们需要的环境可能不止这几个。（尤其是，同一套应用给不同的用户去部署的时候，常见于外包项目）
那就需要我们自己来配置不同的环境。此时可以用到 cross-env 它的设计是为了定义全平台兼容的环境变量命令，因为 Windows 在设置环境变量的命令会出现阻塞问题

安装

npm install --save-dev cross-env

使用

{
  "scripts": {
    "build": "umi build",
    "build:tom": "cross-env HOST=tom umi build",
    "build:jerry": "cross-env HOST=jerry umi build",
  },
}

然后在需要用到的地方(比如：defaultSetting.js)进行判断即可：

let baseUrl = ‘‘;
let HOST = process.env.HOST;
if (HOST === ‘tom‘) {
  baseUrl = ‘/www.tom.com/‘;
} else if (HOST === ‘jerry‘) {
  baseUrl = ‘/www.jerry.com/‘;
} else {
  baseUrl = ‘/www.tomAndjerry.com/‘;
}

export default {
  baseUrl,
};

运行

运行 npm run build:tom 会得到 baseUrl = ‘/www.tom.com/‘

运行 npm run build:jerry 会得到 baseUrl = ‘/www.jerry.com/‘

最后的 else 其实是防备的 npm run build 和 npm start 等不会设置这个变量的情况。