总结一下“NODE_ENV”相关的几个技术点

雨点打透心脏的1/2处 2022-09-04 09:57 139阅读 0赞

![c10a1eb8d1d48b9b9681333a611c607f.png][]

###  ###

### **一. 概念 - node下的全局环境process.env**    ###

node中有全局变量process表示当前node进程，process.env包含着关于系统环境的信息。

但是process.env中并不存在NODE\_ENV这个东西。

其实NODE\_ENV只是一个用户自定义的变量，但是这个NODE\_ENV变量语义非常恰当，并且在前端工程化配置中作为判断生产环境/开发环境的依据是非常自然而方便的事情，因而在前端工程化中逐渐成为一个事实规范。

当我们在服务启动时配置NODE\_ENV,或在代码中给process.env.NODE\_ENV赋值，js便能通过process.env.NODE\_ENV获取信息。

### **二. node运行环境下的设置与使用** ###

1. 临时设置 - 在cmd下的node环境下

window: set NODE_ENV=productionlinux:  export NODE_ENV=production

2. 永久设置

window：右键(此电脑) -> 属性(R) -> 高级系统设置 -> 环境变量(N)...linux:      vim /etc/profile

3. 常用脚本设置 - 将NODE\_ENV=XXXX放到项目package.json的scripts命令中

"scripts": {    "build-win": "SET NODE_ENV=production && webpack --config build/webpack.config.js",    "build-linux": "EXPORT  NODE_ENV=production && webpack --config build/webpack.config.js",　　 "build-mac": "NODE_ENV=production node build/dev-server.js"  }

4. 常用脚本设置 - 跨平台方案，第三方插件cross-env

"scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"  }

使用：

console.log(process.env.NODE_ENV)

### **三. webpack打包环境下的设置与使用** ###

DefinePlugin允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。

因此我们可以在webpack.config.js 中添加如下代码配置全局变量信息了，因为当webpack进行编译的时候会全局设置变量；如下代码：

module.exports = {  plugins: [    // 设置环境变量信息    new webpack.DefinePlugin({      AA: 'aa',      BB: 'bb',      'process.env': {        NODE_ENV: JSON.stringify(process.env.NODE_ENV)      }    })  ]}

这样使用时就与node运行环境下一样了：

console.log(process.env.NODE_ENV)

#  #

**学习更多技能**

**请点击下方公众号**

![9fe0bfc59ca69385956a5d9e678e741a.gif][]

![80f6e6e3b13e419f1d6b9f4addbaa1b6.png][]

![3bfa636d828bca9a54a5c1c0c96a651f.png][]

[c10a1eb8d1d48b9b9681333a611c607f.png]: /images/20220829/14ce686b9deb4276bcea039cb58772a5.png
[9fe0bfc59ca69385956a5d9e678e741a.gif]: /images/20220829/5b655d5e61a642aeb2a1e2d52a7d0663.png
[80f6e6e3b13e419f1d6b9f4addbaa1b6.png]: /images/20220829/a7285d5fe6554f6683bca239eada63d9.png
[3bfa636d828bca9a54a5c1c0c96a651f.png]: /images/20220829/5b60b9bf286e45d3844584dfd6ae526e.png