深入理解webpack process.env.NODE_ENV配置

更新時間：2020年02月23日 09:59:31 作者：涂根華

這篇文章主要介紹了深入理解webpack process.env.NODE_ENV配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在node中，有全局變量process表示的是當(dāng)前的node進程。process.env包含著關(guān)于系統(tǒng)環(huán)境的信息。但是process.env中并不存在NODE_ENV這個東西。NODE_ENV是用戶一個自定義的變量，在webpack中它的用途是判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境的依據(jù)的。

為了查看 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 屬性返回的是一個包含用戶環(huán)境信息的對象，它可以區(qū)分開發(fā)環(huán)境或正式環(huán)境的依據(jù)，那么我們?nèi)绾闻渲铆h(huán)境變量呢？

一. 如何配置環(huán)境變量：

直接在cmd環(huán)境配置即可，查看環(huán)境變量，添加環(huán)境變量，刪除環(huán)境變量等操作。

1.1 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=

1.2 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

如下查看環(huán)境變量，添加環(huán)境變量，刪除環(huán)境變量操作如下：

顯示所有的環(huán)境變量，如下圖所示

注意：如果我們在命令行中設(shè)置環(huán)境變量后，比如設(shè)置 production 后，如下設(shè)置：
export NODE_ENV=production ，那么會在所有的項目下都是正式環(huán)境，當(dāng)我們使用命令 npm install 后下載依賴包時，只會把 package.json中的dependencies依賴項下載下來，對于devDependencies中的依賴包是下載不下來的。
因此我們需要使用上面的命令 unset NODE_ENV 刪除剛剛設(shè)置的環(huán)境變量。

二：理解 DefinePlugin 含義

官網(wǎng)（https://webpack.js.org/plugins/define-plugin/）

官網(wǎng)解釋的是：DefinePlugin允許我們創(chuàng)建全局變量，可以在編譯時進行設(shè)置，因此我們可以使用該屬性來設(shè)置全局變量來區(qū)分開發(fā)環(huán)境和正式環(huán)境。這就是 DefinePlugin的基本功能。

因此我們可以在webpack.config.js 中添加如下代碼配置全局變量信息了，因為當(dāng)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": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
 "build": "webpack --progress --colors --devtool cheap-module-source-map",
 "build:dll": "webpack --config webpack.dll.config.js"
},

這樣配置完成后，為了驗證一下是否是全局變量，運行npm run dev 打包后，我們可以在我們項目中入口js文件，打印下即可：比如如下代碼：

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: undefined }

如上信息可以看到 process.env.NODE_ENV 打印出為undefined，那是因為我們在 package.json文件中未進行配置。下面我們把package.json 加上 NODE_ENV變量值，代碼打包命令變成如下：

"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"
},

如上打包命令，在dev打包命令上，前面加上了 NODE_ENV=development 命令，在build打包命令上前面加上了 NODE_ENV=production，因此繼續(xù)查看代碼結(jié)果變?yōu)槿缦拢?/p>

console.log('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: 'development' }

可以看到這個時候 process.env.NODE_ENV 才有值，因此在項目打包中，為了區(qū)分開發(fā)環(huán)境和正式環(huán)境我們像如上配置即可，然后在webpack.config.js中通過 process.env.NODE_ENV 這個來區(qū)分正式環(huán)境還是開發(fā)環(huán)境即可。

三：理解 cross-env

1. 什么是cross-env呢？
它是運行跨平臺設(shè)置和使用環(huán)境變量的腳本。

2. 它的作用是啥？

當(dāng)我們使用 NODE_ENV = production 來設(shè)置環(huán)境變量的時候，大多數(shù)windows命令會提示將會阻塞或者異常，或者，windows不支持NODE_ENV=development的這樣的設(shè)置方式，會報錯。因此 cross-env 出現(xiàn)了。我們就可以使用 cross-env命令，這樣我們就不必?fù)?dān)心平臺設(shè)置或使用環(huán)境變量了。也就是說 cross-env 能夠提供一個設(shè)置環(huán)境變量的scripts，這樣我們就能夠以unix方式設(shè)置環(huán)境變量，然而在windows上也能夠兼容的。

要使用該命令的話，我們首先需要在我們的項目中進行安裝該命令，安裝方式如下：

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"
}

以上就是深入理解webpack process.env.NODE_ENV配置的詳細(xì)內(nèi)容，更多關(guān)于webpack process.env.NODE_ENV配置的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: