前端构建设置通用的环境变量以及遇到的问题

在前端构建打包的时候，经常会遇到根据当前环境去做一些不同的操作

在Windows中设置

在Win中，在package.json 的构建命令中使用set命令设置

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:dev":"echo \"Build\" && set ENV_CONFIG=dev && node demo.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在Mac或者Linux中设置

在在Mac或者Linux中，在package.json的构建命令中使用export命令设置

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build":"echo \"Build\" && export ENV_CONFIG=dev && node demo.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

问题：影响项目的打包构建，不能通用

解决方案

使用cross-env进行设置

• 安装

执行命令

npm install --save-dev cross-env 

• 修改package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "echo \"Build\" && cross-env ENV_CONFIG=dev node demo.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

注意：这里一定要将设置环境变量和使用环境变量进行操作的命令之间的 &&去掉，因为加了&&,就意味着使用环境变量进行操作的命令是一个新的环境，在这个环境中是没有cross-env设置的环境变量的，这个时候取值是undefined

例子

这里在demo.js中输出ENV_CONFIG这个环境变量

• 文件demo.js文件内容

console.log(process.env.ENV_CONFIG)

• 去掉命令中cross-env ENV_CONFIG=dev后面的&&执行npm run build
  结果如下：

• 保留命令中cross-env ENV_CONFIG=dev后面的&&执行npm run build

更多请参见cross-env