前端工程项目的NODE_ENV

在搭建前端工程项目的时候,在package.json的scripts命令内容和webpack配置文件中可以看到NODE_ENV这个变量,它的值可以是development或product,也有人简写为'dev'或'prod'。

1.这个变量有什么用?

    顾名思义,这个变量表示构建项目的当前环境,也就是我们的程序会跑在生产环境、测试环境还是开发环境,在webpack配置中我们会根据不同环境作出不同的配置。

2.在哪里设置?

  我们知道,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_ENV=XXXX放到项目package.json的scripts命令中:

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

 也有人会在webpack配置文件中对NODE_ENV作默认值处理,如果scripts.build||script.start脚本没有设置NODE_ENV,缺省值为'development'.

//...
NODE_ENV: process.env.NODE_ENV || 'development',
//...

3.不同平台下的设置区别?

  在类unix系统和安装并使用了bash的windows的系统上,我们会使用:

"EXPORT  NODE_ENV=production && webpack --config build/webpack.config.js"

  在windows系统上,我们使用:

"SET NODE_ENV=production && webpack --config build/webpack.config.js"

有的人嫌麻烦,为了屏蔽两种系统间的这个区别,会引用第三方插件cross-env

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}
  只要在NODE_ENV前面加上cross-env标志,会根据当前系统类型帮你选择适当的指令给NODE_ENV赋值。




你可能感兴趣的:(前端工程项目的NODE_ENV)