process.env.NODE_ENV

一、process.env

查阅文档的时候可以看到这样一句话：process 对象提供有关当前 Node.js 进程的信息并对其进行控制。

const process = require('node:process');

在计组的知识点中我们知道：process(进程)是系统进行资源分配和调度的基本单位，是操作系统结构的基础。那么，在node.js中，process是否也有操作系统结构的信息呢？

打印一下看看：

const process = require('process')
const express = require('express')
const app = express()

app.get('/',(req,res)=>{
    
    console.log(process);
})

app.listen(port, host)

访问localhost:3000后查看控制台：

可以看到，process代表的值是计算机系统相关的信息，而process.env则表示的是系统环境变量。

理解：process可以看作是node.js中的一个全局变量。

二、NODE_ENV

注意：我本来想在文档中找找这个属性的，可是它并不存在于文档中，这是因为，NODE_ENV仅仅是一个自定义变量，据说最早是express社区中流传这个自定义变量，后来慢慢就成为了前端开发中的一个使用规范。

注意看上面那一张图片中框起来的部分，为什么会加上这个环境变量呢？

这是因为：在开发的过程中，我们可能需要同时面临多种环境。比如：

• 开发：API_URL =Ihttp://127.0.0.1:3000
• 线上部署环境：API_URL =https://imNeko:3000

这也是为什么，有时候我们在开发的时候感觉代码项目没有问题，可是部署到线上时出现了差错。

在这里我以一个基于Nuxt.js的项目中的package.json来举例：

"scripts": {
    
    // 让 cross-env 把 NODE_ENV 设置为 development, 再运行指定文件 server/index.js
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
},

从上面的代码可以看出：

当我们执行npm run dev的时候，NODE_ENV 将会被注入到 process.env 对象上，并且值为 development，我们 只 可以在 server/index.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV，而无法在其它脚本中访问

不过，如果采用的是webpack打包方式，注册下面这个插件既可以让其他文件访问到process.env.NODE_ENV

const webpack = require('webpack');
module.exports = {
    
  // ...
  plugins: [
    // DefinePlugin允许我们创建全局变量，可以在编译时进行设置
    new webpack.DefinePlugin({
    
      'process.env.NODE_ENV': '"development"'
    })
  ]
  // ...
}

现在看看如何在项目中切换环境变量：

let env = process.env.NODE_ENV
let cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
let cssSourceMapProduct = (env === 'production' && config.build.productionSourceMap)
let useCssSourceMap = cssSourceMapDev || cssSourceMapProduct

我们可以根据process.env.NODE_ENV的值来选择编译打包什么文件。

2.1 设置NODE_ENV

2.1.1临时设置

在cmd窗口中输入这段代码：

set NODE_ENV = production
// set NODE_ENV = development

然后打印process：

2.1.2永久设置

在系统环境变量下面手动添加即可。