开发时环境变量

进行开发时经常需要准备多个线上环境，测试环境和正式环境(生产环境)几乎是必须的，偶尔也会有个预上线环境(预生产环境)，不同环境必然是不同分支，不同环境的前端项目，也调用不同环境的后台接口。

本来我的开发策略，调用的接口和分支是绑定在一起的，测试环境中的一个变量改成test，而正式环境的这个值是pro，后面再通过这个值来区分，执行不同的操作，调用不同的接口。

但当我的测试分支没问题，需要合并到正式环境时，由于上面那个变量的问题，git就会多出一个额外的提交，非常讨厌，而且每次合并都会出现一次。

再加上，复杂的系统，偶尔会要求测试环境调用正式的接口部署一下。。。其实关键还是上面那个git提交的问题，太烦人，推动我研究一下这个问题的解决方式。

找到以下几种方式，不同的项目换用不同的方法即可。

解决的问题的核心就是：通过启动指令，传递参数给node，乃至传递给依赖node编译的前端项目中。

下面先说明两个注入参数的引入工具方法，这两个引入工具方法，是所有所有类型的node的项目都支持的：

引入工具

方法一：指令中注入参数

需要安装cross-env：npm install cross-env

官方文档

只能依靠package.json的npm指令生效

cross-env使用方法：

// package.json中
...
"scripts": {
  "start": "cross-env G_ARG=1000 G_ARG2=hello node run.js"
},
...

此时，在node项目中，即可通过process.env.G_ARG来获取字符串[1000]，process.env.G_ARG2来获取字符串[hello]

方法二：引入配置文件

需要安装dotenv：npm install dotenv

官方文档

dotenv使用方法：

// 文件.env中
ARG1=参数1
ARG2=参数2
ARG3=参数3

// 文件run.js中
const dotenv = require('dotenv') // 引入工具

// 使用工具引入配置文件，如果 dotenv.config() 未传参数，或者
dotenv.config({path: '.env'})
console.log(process.env.ARG1)
console.log(process.env.ARG2)
console.log(process.env.ARG3)

// 之后就能打印出[参数1][参数2][参数3]三个字符串了

使用dotenv就可以自己进行一些判断，引入需要的环境配置文件了。

注意：一些脚手架会自动引入对应名字的环境配置文件，是脚手架自动的不需要dotenv工具：

• 以下至少适用于vue的vue-cli和react的create-react-app
• 只要启动项目，脚手架就会自动加载文件.env
• 加载.env文件之后，开发环境自动加载文件.env.development，生产环境自动加载文件.env.production
• 当前是开发还是生产环境，是脚手架自己根据命令判断的，无法人为的自由的控制，就算用cross-env修改NODE_ENV也无济于事
• 如果没有准备对应文件，不会报错

工具环境自带功能

直接使用 npm_config 功能读取

可以在执行指令时，直接使用 --[参数] 传入，然后使用 process.env.npm_config_[参数]，来获取传入参数的值：

// 文件package.json中
{ 
  ...
  "scripts": {
    "start": "node ./start.js --name --tip=100",
  },
  ...
}

// 文件 start.js中
console.log(process.env.npm_config_name) // 字符串 true
console.log(process.env.npm_config_tip) // 字符串 100

还可以在使用 shell 执行指令时传入：

npm run dev --sh1 --sh2=abcd

此时的 start.js 中同样可以读取：

// 文件 start.js中
console.log(process.env.npm_config_name) // 字符串 true
console.log(process.env.npm_config_tip) // 字符串 100
console.log(process.env.npm_config_sh1) // 字符串 true
console.log(process.env.npm_config_sh2) // 字符串 abcd

需要注意，同样的参数名不能赋值两次！

否则不会报错，但最终使用 npm_config 取到的值可能不会是预期的，一定要避免这种情况。

直接读取node的指令process.argv

这个方法，无论是直接使用node运行js，还是使用npm的package.json都可以使用。

// 文件package.json中
{ 
  ...
  "scripts": {
    "start": "node ./run.js a b c",
    "test": "npm start aa bb"
  },
  ...
}

// 文件run.js中
console.log(process.argv)

执行指令 1： npm start

输出：

[ '/Users/mj/.nvm/versions/node/v11.11.0/bin/node',
  '/Users/mj/Desktop/testNode/run.js',
  'a',
  'b',
  'c' ]

执行指令 2： npm run test

输出：

[ '/Users/mj/.nvm/versions/node/v11.11.0/bin/node',
  '/Users/mj/Desktop/testNode/run.js',
  'a',
  'b',
  'c',
  'aa',
  'bb' ]

可见process.argv打印的是输入的指令的数组：

• process.argv[0]：node指令的根目录的全路径
• process.argv[1]：要执行的文件的全路径
• 后面的项：执行时输入的参数

那这个数组后面的项，就是执行指令时的参数了，可以依次识别指令，控制后面node程序的执行了。

依靠这种方式，能链式的处理一些组合的指令。

使用webapck打包，webpack提供的方式

webpack提供了设置node运行环境的指令方法：https://www.webpackjs.com/concepts/mode/

大意就是，在package.json的指令中添加--mode=production或--mode=development(默认)(其实也仅限production和development)，比如：

使用了webpack，就可以在node中读取process.env.NODE_ENV来获取当前的执行环境，不过这种方式只能区分一下当前运行环境。。。比较好的方式，还是使用 npm_config 或 引入工具方法。

至于把一些变量传递给使用webpack打包的前端项目，就需要使用webpack的插件 DefinePlugin 了，网上太多教程，这里不做详解。

使用vue脚手架vue-cli的vue项目

请了解一下引入工具方法二的讲解中的脚手架自动引入环境配置的说明。

众所周知，vue-cli3的脚手架，把项目打包配置全都隐藏了，想要修改打包配置，官方建议使用vue.config.js文件进行配置。

使用引入工具方法传递的参数，在vue.config.js可以直接使用process.env[参数名]拿到。

此外，如果参数是以 VUE_APP_ 开头的，那么在vue前端项目中，也可以用process.env[参数名]获取到。

但注意，当这个的值传递给前端时，无论他在设置时是什么数据类型，无论是vue还是react，前端拿到时都是字符串格式。

还有比较郁闷的一点，就是在文件vue.config.js中，也可以使用如下语句，新增一些前端可以使用的变量：

process.env.VUE_APP_ARG1000 = 1000

前端项目中，就能直接读取 process.env.VUE_APP_ARG1000 的值了，之所以是说郁闷，是因为vue做的有点太好了，有了这个功能，连webpack的定义全局变量的插件都可以省了。

当然，如果想使用webpack的插件，也是可以的，只不过写法需要按照vue-cli要求的来：

// 文件vue.config.js中
process.env.VUE_APP_CONFIGPARAMS = '1000' // 设置传给前端项目的参数

module.exports = {
  chainWebpack: config => {
    // 配置自动注入参数的插件 DefinePlugin
    config.plugin('define').tap(args => {
      Object.assign(args[0], {
        // 可以在vue项目中使用全局变量[myArg]，但注意，这里的参数必须用 JSON.stringify 转一下
        myArg: JSON.stringify('自定义参数'),
      })
      return args
    })
  },
}

使用react脚手架create-react-app的react项目

请了解一下引入工具方法二的讲解中的脚手架自动引入环境配置的说明。

和vue同理，使用引入工具参数传入的参数，如果是以 REACT_APP_ 开头的，那么在react前端项目中，也可以用process.env[参数名]获取到。

而react的这个脚手架，没有提供一个类似vue的vue.config.js的配置文件，不过仍可以使用react依赖react-app-rewired，来对npm语句包装一下，这样就又可以写一些构建配置了，实现了vue.config.js的功能。

还有一个官方不建议的做法，就是使用指令npm run eject，把react项目的编译配置全部都弹射出来，但一旦执行，就没有指令再把配置隐藏了，只能回滚项目到弹射之前。

需要安装react-app-rewired：npm install react-app-rewired -D

修改react的npm语句，如下：

- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",

新建文件config-overrides.js：

// 文件config-overrides.js中
const webpack = require('webpack');

process.env.REACT_APP_CONFIGPARAMS = '1000' // 设置传给前端项目的参数
// 下面可以可无，不影响参数传递
module.exports = function override(config, env) {
  // 关于webpack的相关配置
  config.devtool = false
  return config;
};

综合的建议

如果想把启动参数拿出来放到文件管理，用引入工具方法二的引入配置文件.env的方式。

如果不想使用上面的方式：

• 使用node和webpack启动项目时，直接启动不同的js
• 使用vue和react的脚手架时
  • 如果参数少，就使用引入工具方法一的指令传参或npm_config
  • 参数多的话，就还是引入工具方法二或npm_config吧，用不同文件区分开，好管理