做的项目多了,就接触到很多种process.env的设置方式,有时候难免会有些迷糊,这里做些总结
准备工作
环境变量是一些我们不想在代码里处理的变量,它可以让我们写的代码与它所运行的环境联系起来。我们工作中常常都会用到环境变量,但是很多时候我们用的并不是那么的得心应手,特别是在它的作用域问题上。
最常见的环境变量的设置是在.bash_profile
文件中export出来
export AWS_SECRET_ACCESS_KEY=foo
export AWS_ACCESS_KEY_ID=bar
然后在node程序(其他的程序中有自己的获取方式)中你就可以直接使用了
var secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;
var accessKeyId = process.env.AWS_ACCESS_KEY_ID;
这种方式最大的缺点就是如果有两个程序,需要不同的accessKeyId和secretAccessKey,这样我们就得修改变量的名字,比如加上前缀proA_accessKeyId等,如果有三个甚至更多呢,这样的处理方式就肯定不是我们想要的了
最理想的就是每个程序有自己的环境变量配置,下面我们看下在node、npm、webpack中如何使用环境变量
1. node中使用环境变量
我们常见的方式是这种方式
NODE_ENV=production node index.js
这种方式最大的问题就是变量一多,写起来有点长,也不便于维护。所以如果你写node程序的话,你可能需要dotenv,他通过项目根目录的.env文件来维护环境变量
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
然后就能这样使用了
require('dotenv').config()
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
dotenv
还支持preload功能。就是你不想在代码里留下这句require('dotenv').config()
,毕竟这对有洁癖的人来说还是难以忍受的,你可以使用 node的--require (-r)选项
node -r dotenv/config your_script.js
当然webpack的工程中也可以使用dotenv,只不过是有时候webpack.DefinePlugin
基本就够用了
2. npm中使用环境变量
npm对于环境变量的使用最多的应该是在package.json的scripts模块中
- package.json文件中的变量
package.json vars
The package.json fields are tacked onto the npm_package_ prefix. So, for instance, if you had {"name":"foo", "version":"1.2.5"} in your package.json file, then your package scripts would have the npm_package_name environment variable set to "foo", and the npm_package_version set to "1.2.5"
上面这段是官方文档中摘下来的,就是告诉我们package.json文件中的key值都会被设置成以npm_package_为前缀的环境变量,比如如果你的package.json文件中有这么一段{"name":"foo", "version":"1.2.5"}
,那么你在package scripts 中就可以使用$npm_package_name
变量了,它的值就是foo
,自然你也可以在js代码中使用process.env.npm_package_name
获取到它的值
不过现在都是开源时代,谁还看文档啊,直接看源码就好了
有个例外,如果是config
模块的值还会被设置成以npm_config_
前缀的环境变量,使用上和上面一致
当然如果我们只需要在js代码中使用package中的信息,还是通过require的方式获取显得更加方便
const package = require('./package.json')
console.log(package.version)
- package.json文件中scripts模块的环境变量
我们对已有的环境变量可以$xxx和${xxx}这两种方式使用
{
scripts:{
"argv": "echo $npm_package_version",
"argv": "echo ${npm_package_version}",
}
}
我们还可以设置环境变量,我们常看到的就是这样了
// NODE_ENV就是我们设置的环境变量,通过process.env.NODE_ENV就可以使用了
{
scripts:{
"build": "NODE_ENV=production webpack --config config/webpack/production.config.js"
}
}
当然这其实都是bash和node的知识范畴
3. webpack中使用环境变量
上面node和npm设置的环境变量在webpack中都可以使用,而webpack中我们还可以看到一种定义方式,就是通过DefinePlugin来定义
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: "production"
},
PRODUCTION: JSON.stringify(true),
RELEASE: JSON.stringify(process.env.RELEASE)
})
这种定义方式本质上有点类似 process.env.NODE_ENV = "production"
这种js代码直接赋值的方式,为什么类似呢,因为它还是有区别的,区别就是在build出来的代码上你可以看待到process.env.NODE_ENV
会直接被production
字符串替换(注意:并不是简单的直接替换,它是根据AST来替换的
)。因为并非真正的设置到了环境变量中,所以我们不能把需要环境变量的地方依赖于它,否则不会有效果
4.总结
其实这里的应该都是属于node中的环境变量,毕竟npm和webpack都是用node跑的,所以node的环境变量的设置方式对三者都有效,只是npm和webpack有些是自己封装过的设置方式,其设置只对自己有效罢了