process.env.NODE_ENV

NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。

NODE_ENV会赋值给process.env对象，作为它的一个属性，其值通常为“production”（生产环境）和“development”（开发环境），或者“prod”和“dev”，以此来区分不同环境下的逻辑行为，例如：

if(process.env.NODE_ENV === 'development'){ 
    //开发环境 do something
}else{
    //生产环境 do something
}

实际上process.env对象是不存在这个属性的,打印Object.keys(process.env)可知：

[
    "TERM_SESSION_ID",
    "SSH_AUTH_SOCK",
    "Apple_PubSub_Socket_Render",
    "COLORFGBG",
    "ITERM_PROFILE",
    "XPC_FLAGS",
    "PWD",
    "SHELL",
    "LC_CTYPE",
    "TERM_PROGRAM_VERSION",
    "TERM_PROGRAM",
    "PATH",
    "COLORTERM",
    "TERM",
    "HOME",
    "TMPDIR",
    "USER",
    "XPC_SERVICE_NAME",
    "LOGNAME",
    "__CF_USER_TEXT_ENCODING",
    "ITERM_SESSION_ID",
    "SHLVL",
    "OLDPWD",
    "ZSH",
    "ANDROID_SDK_ROOT",
    "ANDROID_HOME",
    "PAGER",
    "LESS",
    "LSCOLORS",
    "NVM_DIR",
    "NVM_CD_FLAGS",
    "NVM_BIN",
    "PUB_HOSTED_URL",
    "FLUTTER_STORAGE_BASE_URL",
    "_"
]

然而process.env.NODE_ENV可用，是前端工程化过程中大家约定俗成的做法，尤其是webpack构建前端工程时，会经常使用。那这个属性是什么时候赋值给process.env的呢？

以webpack的工程为例，通常是运行脚本时来做这件事，例如package.json中的脚本：

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "dev": "NODE_ENV=development webpack --watch ",
  "build": "NODE_ENV=development webpack --mode=production"
},

说明：NODE_ENV=development在windows环境下会报错，需要改为set NODE_ENV=production，为了解决这个差异，可以使用cross-env跨平台的设置和使用环境变量,这里就不解释具体使用方法了。

这样，就可以在webpack.config.js中使用process.env.NODE_ENV了，但是不能在webpack.config.js引入的模块中使用，要想在模块当中直接使用，我们还需要一些配置。

webpack4之前可以使用DefinePlugin插件配置：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app'
    },
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]
};

webpack4版本之后可以通过mode选项实现：

module.exports = {
    // 定义环境变量
    mode: 'development',
    // JavaScript 执行入口文件
    entry: './main.js',
    output: {
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: 'bundle.js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
    }, 
};

DefinePlugin和mode选项定义的NODE_ENV 作用于webpack入口文件下的业务代码，通常为src文件夹下的代码， 而 npm脚本里的设置多用于配置相关，例如在webpack.config.js里区分环境配置不同插件

原文：https://www.cnblogs.com/ShuiNian/p/13211750.html