問題描述

• 項(xiàng)目中環(huán)境隔離是避免不了的
• 因此經(jīng)常會在項(xiàng)目入口文件中看到一些環(huán)境隔離的code

//index.js
const isProduction = process.env.NODE_ENV === 'production'

//package.json
"scripts": {
    "test": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=test ava",
    "build": "webpack --config webpack.config.prod.js  --progress --colors",
    "start": "webpack-dev-server --config webpack.config.js --progress --inline  --colors --port 1337 --host 0.0.0.0",
    "start:mock": "TARGET=http://localhost:8080 npm start",
    "deploy": "cross-env NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack.config.prod.js"
  },

• 就有疑問：
  • 我是什么時(shí)候給process.env.NODE_ENV賦值了呢？
  • 在命令行中定義變量有什么用，如何傳遞到代碼中呢？
  • 是不是說我在代碼的任何一地方都能夠訪問到這個(gè)process對象并且任何訪問的地方數(shù)據(jù)都是一致的呢？

問題解答

• Q1:process是什么對象有什么作用呢？
• A1:process對象是一個(gè)Global全局對象，你可以在任何地方使用它，而無需require。

全局對象（模塊）

• 在所有模塊中都能使用的對象
• 作用域是全局的
  • 比如export也是在所有模塊中都能使用，但是作用域是當(dāng)前模塊

process對象

• node.js中進(jìn)程相關(guān)的對象
• 是全局對象，因此你可以在code中的任何一個(gè)地方訪問其對象中的屬性，值都是一致的
• 其中包含一些和進(jìn)程以及nodejs運(yùn)行環(huán)境相關(guān)的一些屬性
  • process.env:返回用戶運(yùn)行環(huán)境對象
  • process.execArgv:返回Node的命令行參數(shù)數(shù)組
  • process.argv:一個(gè)當(dāng)前執(zhí)行進(jìn)程折參數(shù)組，第一個(gè)參數(shù)是node，第二個(gè)參數(shù)是當(dāng)前執(zhí)行的.js文件名，之后是執(zhí)行時(shí)設(shè)置的參數(shù)列表。
  • process.on()：綁定事件

  - exit:進(jìn)程退出事件
  - uncaughtException：包含沒有捕獲異常的時(shí)間
- process.nextTick()以及process.exit()等方法

• Q2:process.env是什么？如何設(shè)置？默認(rèn)值又是什么呢？
• A2:是一個(gè)對象，包含關(guān)于環(huán)境變量的內(nèi)容。
  • 訪問當(dāng)前node.js的運(yùn)行環(huán)境：process.env.NODE_ENV
  • 修改當(dāng)前環(huán)境：通過命令行修改nodejs運(yùn)行環(huán)境
    • export NODE_ENV=test && node app.js
      • 在啟動服務(wù)中之前使用上個(gè)命令修改環(huán)境
  • 默認(rèn)的node.js運(yùn)行環(huán)境：
    • 當(dāng)你沒有設(shè)置NODE_ENV的值,其默認(rèn)值為undefined

• Q3: 命令行如何傳參到代碼中？代碼中又是如何訪問到的呢？
• A3:有很多傳參方式，配合node命令傳參，使用webpack傳參，使用npm傳參：
  • node：
    • 傳入：TEST=aa node app.js
    • 訪問：process.env.TEST
  • webpack命令傳參

    • 傳入：在webpack命令或者webpack-dev-server命令之后使用--env.**=**設(shè)置變量或者設(shè)置NODE_ENV的值

    • 訪問：只能在webpack.config.js中訪問，通過訪問export.module的回調(diào)函數(shù)傳入的參數(shù)env。在回調(diào)函數(shù)中使用env.** 訪問變量值

    • 資料：https://webpack.js.org/guides/environment-variables/

    • 例子:

      //package.json
       "start": "webpack-dev-server --env.TEST=aaa --env.NODE_ENV=local --config webpack.config.js --progress --inline  --colors --port 1337 --host 0.0.0.0"
       //webpack.config.js
       module.exports = (env) => {
      

console.log(env.TEST) //aaa
console.log(env.NODE_ENV) //local
return {
devtool: 'inline-source-map',
entry: {
vendor: [
'react',
'react-dom',
。。。
}
}
}
```
- 注意點(diǎn)：
- 如果你的服務(wù)是通過webpack-dev-server啟動
- 如果直接在命令行中使用TEST=aa webpack-dev-server
- 那么就只能在webpack.config.js中的module.export回調(diào)函數(shù)中通過process.env.TEST訪問到傳入的值
- 而不能在code中訪問到

• npm腳本的使用：http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html