一、 process.env.NODE_ENV是什么？
在node中，有全局變量process表示的是當前的node進程。
process.env包含著關(guān)于系統(tǒng)環(huán)境的信息，但是process.env中并不存在NODE_ENV這個東西。
NODE_ENV是一個用戶自定義的變量，在webpack中它的用途是判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境。
為了查看 process的基本信息，我們可以在文件夾中 新建一個process.js文件，在里面加一句代碼console.log(process);然后進入該文件夾，執(zhí)行node process.js可以在命令行中打印如下信息：
$ node process.js
process {
title: 'node',
version: 'v4.4.4',
moduleLoadList:
[....],
versions:
{ http_parser: '2.5.2',
node: '4.4.4',
v8: '4.5.103.35',
uv: '1.8.0',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '46',
openssl: '1.0.2h' },
arch: 'x64',
platform: 'darwin',
release:
{ name: 'node',
lts: 'Argon',
sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
argv:
[ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
'/Users/tugenhua/個人demo/process.js' ],
execArgv: [],
env:
{ TERM_PROGRAM: 'Apple_Terminal',
SHELL: '/bin/zsh',
TERM: 'xterm-256color',
TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
TERM_PROGRAM_VERSION: '404',
TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
USER: 'tugenhua',
SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
PWD: '/Users/tugenhua/個人demo',
LANG: 'zh_CN.UTF-8',
XPC_FLAGS: '0x0',
XPC_SERVICE_NAME: '0',
SHLVL: '1',
HOME: '/Users/tugenhua',
LOGNAME: 'tugenhua',
SECURITYSESSIONID: '186a8',
OLDPWD: '/Users/tugenhua/工作文檔/sns_pc',
ZSH: '/Users/tugenhua/.oh-my-zsh',
PAGER: 'less',
LESS: '-R',
LC_CTYPE: 'zh_CN.UTF-8',
LSCOLORS: 'Gxfxcxdxbxegedabagacad',
NVM_DIR: '/Users/tugenhua/.nvm',
NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
NVM_RC_VERSION: '',
MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
_: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
__CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
pid: 14034,
features:
{ debug: false,
uv: true,
ipv6: true,
tls_npn: true,
tls_sni: true,
tls_ocsp: true,
tls: true },
_needImmediateCallback: false,
config: {},
nextTick: [Function: nextTick],
_tickCallback: [Function: _tickCallback],
_tickDomainCallback: [Function: _tickDomainCallback],
stdout: [Getter],
stderr: [Getter],
stdin: [Getter],
openStdin: [Function],
exit: [Function],
kill: [Function],
mainModule:
Module {
id: '.',
exports: {},
parent: null,
filename: '/Users/tugenhua/個人demo/process.js',
loaded: false,
children: [],
paths:
[ '/Users/tugenhua/個人demo/node_modules',
'/Users/tugenhua/node_modules',
'/Users/node_modules',
'/node_modules' ] } }
如上就可以看到 process是node的全局變量，并且process有env這個屬性，但是沒有NODE_ENV這個屬性。
二、process.env.NODE_ENV該如何配置？
process.env屬性返回的是一個包含用戶環(huán)境信息的對象，它可以區(qū)分開發(fā)環(huán)境或正式環(huán)境的依據(jù)，那么我們?nèi)绾闻渲盟兀?/p>
方法1：配置環(huán)境變量
- windows環(huán)境配置如下：
#node中常用的到的環(huán)境變量是NODE_ENV，首先查看是否存在
set NODE_ENV
#如果不存在則添加環(huán)境變量
set NODE_ENV=production
#環(huán)境變量追加值 set 變量名=%變量名%;變量內(nèi)容
set path=%path%;C:\web;C:\Tools
#某些時候需要刪除環(huán)境變量
set NODE_ENV=
- Linux配置(mac系統(tǒng)環(huán)境也屬于這個)如下：
#node中常用的到的環(huán)境變量是NODE_ENV，首先查看是否存在
echo $NODE_ENV
#如果不存在則添加環(huán)境變量
export NODE_ENV=production
#環(huán)境變量追加值
export path=$path:/home/download:/usr/local/
#某些時候需要刪除環(huán)境變量
unset NODE_ENV
#某些時候需要顯示所有的環(huán)境變量
env
注意：如果NODE_ENV設(shè)置為production后，所有的項目都會處于正式環(huán)境中。
此時使用命令npm install下載依賴包時，只會把package.json中的dependencies依賴項下載下來，對于devDependencies中的依賴包是下載不下來的。因此需要使用上面的命令unset NODE_ENV刪除剛剛設(shè)置的環(huán)境變量。
方法2：使用DefinePlugin
DefinePlugin官網(wǎng)的解釋是：DefinePlugin允許我們創(chuàng)建全局變量，可以在編譯時進行設(shè)置。
因此可以使用該屬性來設(shè)置全局變量來區(qū)分開發(fā)環(huán)境和正式環(huán)境，這就是DefinePlugin的基本功能。
我們可以在webpack.config.js中添加如下代碼配置全局變量信息，因為當webpack進行編譯的時候會全局設(shè)置變量，如下代碼：
module.exports = {
plugins: [
// 設(shè)置環(huán)境變量信息
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
}
package.json中的打包配置如下：
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
"build:dll": "webpack --config webpack.dll.config.js"
},
這樣配置完成后，為了驗證一下是否是全局變量，運行npm run dev打包后，在我們項目入口js文件中打印下即可：
console.log(process.env.NODE_ENV); // 打印結(jié)果為 'development'
發(fā)現(xiàn)process.env.NODE_ENV已經(jīng)被作為全局變量打印出來了，因此在項目打包中為了區(qū)分開發(fā)環(huán)境和正式環(huán)境我們可以使用這種方法。
關(guān)于cross-env
什么是cross-env呢？
它是運行跨平臺設(shè)置和使用環(huán)境變量的腳本。它的作用是啥？
當我們使用DefinePlugin這種方法設(shè)置NODE_ENV時，大多數(shù)windows命令會提示將會阻塞或者異常，或者windows不支持NODE_ENV=development的這樣的設(shè)置方式，會報錯。因此cross-env出現(xiàn)了。我們可以使用cross-env命令來實現(xiàn)全開發(fā)平臺的兼容。
要使用該命令的話，我們首先需要在我們的項目中安裝該命令：
npm install --save-dev cross-env
在package.json中的scripts命令如下：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
"build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
"build:dll": "webpack --config webpack.dll.config.js"
}
三、vue-cli3.0中的process.env.NODE_ENV
使用vue-cli3構(gòu)建的項目就簡單多了，因為vue-cli3使用上述的DefinePlugin方式幫你把process.env.NODE_ENV配置好了，我們不需要再自己去配置。
它自帶了三種模式：
development：在vue-cli-service serve下，即開發(fā)環(huán)境使用
production：在vue-cli-service build和vue-cli-service test:e2e下，即正式環(huán)境使用
test： 在vue-cli-service test:unit下使用
在package.json中的scripts命令如下
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve", //本地開發(fā)運行，會把process.env.NODE_ENV設(shè)置為'development'
"build": "vue-cli-service build", //默認打包模式，會把process.env.NODE_ENV設(shè)置為'production'
},
"dependencies": {
}
}
