[React] 依建置環境切分 create-react-app 產出專案的組態

2019-06-14

1505
0
React
2019-06-30

如何在 create-react-app 產出專案中依據建置環境來切分各自的組態參數

前言

建立一個 react 專案最簡單的方式就是透過 create-react-app 這個官方 cli 來產出，雖然不如其他框架有多種 options 幫你準備齊全，但也只能忍耐了；當我們需要對 webpack 作進一步的設定時，可以透過 eject 指令產生所有設定檔 (這行為是不可逆的，請警慎使用)，本文就是介紹要如何在此專案預設結構中切分出不同建置環境所需的組態資訊。

環境

create-react-app: 3.0.1
webpack: 4.29.6

傳入參數

首先必須知道需求是什麼，所以簡單列下兩點：

1. 建置時可以依不同"建置環境"設定 public path (若佈署在 sub directory 就必須設置)

2. 建置時可以依不同"建置環境"使用不同的常數設定 (ex. 每個環境對應後端的 api url 都不同)

因此在 build 時需要傳入以下兩項參數資訊：

1. Mode: 不同佈署環境的辨識資訊 (uat, sit, prod..)

2. RootPath: 佈署位置的 sub directory 資訊 (用來設定 webpack public path)

於 package.json 預定 script 語法，在呼叫 build.js 時傳入 mode 與 rootPath 資訊。

"scripts": {

  "______uat": "===== 建置 UAT 環境 =====",
  "build-uat": "node scripts/build.js --mode=uat --rootPath=/chat/",

  "______prod": "===== 建置 PRODUCTION 環境 =====",
  "build-prod": "node scripts/build.js --mode=prod --rootPath=/chat/tw/",

},

接收參數

過 command-line-args 組件幫忙，我們可以更輕易的解析傳入參數；在 build.js 收到 mode 與 rootPath 參數後將其存放於 process.env 全域變數中，讓其他檔案也可以取得這些資訊。

// 定義 build.js 的傳入參數
const optionDefinitions = [
  { name: 'mode', type: String},
  { name: 'rootPath', type: String},
]

// 接收及格式化傳入參數
const commandLineArgs = require('command-line-args')
const options = commandLineArgs(optionDefinitions)

// 將參數存入 process.env 全域變數
process.env.MODE = options.mode
process.env.ROOT_PATH = options.rootPath