iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Modern Web

想成為超級開源貢獻者嗎 ? 新手也能用Javascript寫出專業高效能的"新世代"開源庫系列 第 27

環境搭建好幫手process && env 環境變數

process是什麼呢

process就是進程的意思,以計算機概論的角度,一個CPU在一個時間點只會執行一個進程。而我們可以利用process對象取得包括JS腳本線程,Http線程...所有環境資訊,而無需使用require()

也就是說 我們可以在node環境中使用 process已獲得當前的全局信息,裡面會有像 process.initgroups:用戶資訊、process.execPath :

文件的絕對路徑 、甚至像是 process.env:用戶環境的對象(這個之後會討論)。

process.env

該process.env屬性返回一個包含用戶環境的對象

  1. process.env setting 設定 process.env

//以process.env.NODE_ENV為例
查看所有環境變量
 set

查看單個環境變量(以NODE_ENV為例)
 set NODE_ENV

設置單個環境變量(以NODE_ENV為例)
 set NODE_ENV=production

刪除單個環境變量(以NODE_ENV為例)
 set NODE_ENV=
//以process.env.NODE_ENV為例
# 查看所有環境變量
ls env:

# 查看單個環境變量(以NODE_ENV為例)
$ env:NODE_ENV

# 設置單個環境變量(以NODE_ENV為例)
$ env:NODE_ENV= "production"

# 刪除單個環境變量(以NODE_ENV為例)
 del env:NODE_ENV
# 查看所有環境變量
  env

# 查看單個環境變量(以NODE_ENV為例)
  echo $NODE_ENV

# 設置單個環境變量(以NODE_ENV為例)
  export NODE_ENV=production

# 刪除單個環境變量(以NODE_ENV為例)
  unset NODE_ENV
# 查看所有環境變量
env

# 查看單個環境變量(以NODE_ENV為例)
echo $NODE_ENV

# 設置單個環境變量(以NODE_ENV為例)
export NODE_ENV=production

# 刪除單個環境變量(以NODE_ENV為例)
unset NODE_ENV
  1. 在package.json設定

由於在WINDOW 和 mac 指令不同,通常會用cross-env --> 一個跨平台設置環境變量的庫,用它來下指令window mac都聽得懂喔。耶~~~~

npm install -g cross - env

再來就是下指令了喔

{ 
   "scripts" : {
                   // Mac的用法 "build" : "export NODE_ENV=production && webpack" 
                   // window的用法 "build" : "set NODE_ENV=production&& webpack"
                  "build" : "cross-env NODE_ENV=production && webpack" 
               }
}

注意

  • 上面的環境設置只是臨時的,即只針對當前運行窗口的環境有效。當指令運行完以後,相關設置都會丟失。

常見用途

  1. 隱藏敏感資訊

    • 使用方式:
    • 在node的環境裡可以將敏感的字訊 寫在 .env檔
    • 'npm i dotenv -S' 下載 dotenv (為什麼是S 前幾贓有提過喔 西西)
    • 利用 require('dotenv').config 即可獲得環境變數喔
    NODE_ENV = dev
    ENVGOODGOOD = GOOD
    
    
    require('dotenv').config();
    console.log(process.env.NODE_ENV) //dev
    console.log(process.env.ENVGOODGOOD) //GOOD
    
  2. 一鍵區隔 開發(dev) 發布 (prod) 測試(uat)環境


 ...
   "scripts" : {
                  "dev"  :  "cross-env NODE_ENV=dev && webpack" 
                  "test" :  "cross-env NODE_ENV=uat && webpack" 
                 "build" : "cross-env NODE_ENV=prod && webpack" 
               }
 ...

總結

env 是一個非常好用的工具,有很多用途,將他配合rollup webpack 會大大的幫助開發喔。

參考文件

上一篇
實作第一個javascript庫-徽章勒
下一篇
大型項目管理 MonoLith Multi-Repo Mono-Repo
系列文
想成為超級開源貢獻者嗎 ? 新手也能用Javascript寫出專業高效能的"新世代"開源庫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言