webpack 中的 process.env

process.env就是Nodejs提供的一个API,它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量,并把它挂载在 process.env 返回的对象上,便可以在代码中进行相应的环境判断。

process.env是Nodejs提供的一个API,那么如果想用process.env.NODE_ENV,就必须先设置其值才能用。

但是如何设置 这个process.env.NODE_ENV环境变量呢?在webpack项目里,我们可以通过设置package.json来实现,但是Windows 系统和Mac系统有区别。

Windows 系统

// package.json
{
  ...
  "scripts": {
    "dev": "set NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "set NODE_ENV=production &&   --progress --hide-modules"
  }
}

Mac 系统

// package.json
{
  ...
  "scripts": {
    "dev": "export NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production &&   --progress --hide-modules"
  }
}

但它们的语法都不尽相同。这就带来两个问题:

那么问题又来了,我在Windows 开发部署的项目,可能在 Mac 系统无法正常打包,反之亦然。为了解决这个问题,有人就开发了 cross-env。

cross-env是一个跨平台设置环境变量的第三方包,它可以让你只配置一行命令,就能轻松地在多个平台设置环境变量。首先先安装

npm install --save-dev cross-env 

然后配置package.json就可以了

// package.json
{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production  --progress --hide-modules"
  },
}

这样我们就可以在项目里取到process.env.NODE_ENV的值,然后利用这个值来区分当前环境。

来源链接:https://www.jianshu.com/p/19d199f93045