# 上銀-新網銀 前端打包以及環境建置

---

## **開發機環境建置**

### <ins>Node.js 與 NPM</ins>

Node.js 是一個開源、跨平台和允許開發者使用Javascript創造伺服器端工具和應用的執行環境。
> React可以在Node上搭建，方便添加npm包，最終還是要bundle成一個獨立的文件，打包給瀏覽器

NPM 全名是 node package manager，就是套件管理工具。
> Node.js 0.6.3以上的版本都已經內建裝上NPM

<br />

### <ins>安裝 NVM 環境</ins>
NVM 為 Node Version Manager 的縮寫，顧名思義就是「Node 版本管理控制」
> 可以在 NVM 的 [Git Repository](https://github.com/nvm-sh/nvm) 中下載，各系統都有對應的安裝方式。

- 切換 Node.js 的版本
- 使用特定 Node.js 作為預設啟用環境
- 安裝不同的套件至特定的版本上

安裝完成後，開啟命令字元」試著輸入nvm，看到以下畫面則代表安裝成功。

<br />

#### <ins>安裝 Node.js</ins>
安裝 NVM 後，其實還沒安裝 Node 環境，
請執行以下指令，指定安裝 Node.js 的 16.7.0 版本

nvm install 16.7.0

> `nvm install XX.XX.XX`：安裝特定版本的 Node.js
>
> `nvm ls`：列出本定端所安裝的 Node.js 環境
>
> `nvm use`：當前命令列套用特定版本的 Node.js
>
> `nvm alias default node`：設定命令列預設開啟的 Node.js
---

## **客戶端離線環境建置**

### <ins>1. 下載所需的相依套件: </ins>
在已經配置好環境的開發機上，進入 `React` 專案的根目錄。
開啟終端機或命令提示字元，並執行以下指令安裝專案的相依套件：

npm install

這將使用 `npm` 自動下載並安裝專案所需的所有相依套件，並將它們儲存在 `node_modules` 目錄中。
> 開發機需要有網路連接
>
> 上銀-新網銀 Gitlab 存儲庫，請點此[連結](http://devops.pershing.com.tw/tdu-scsb-ibank/scsb-bank-frontend)
>
> 專案根目錄指的是 `scsb-bank-frontend\project`

### <ins>2. 複製專案及其相依套件到客戶端離線環境：</ins>
將整個 `React` 根專案目錄（`包括node_modules`目錄）複製到可移動儲存媒體（例如USB驅動器）或使用檔案傳輸工具將其傳輸到離線環境的客戶端機器。

### <ins>3. 在客戶端離線 Red Hat 環境中安裝 `Node.js`：</ins>
> Node版本v16.70
> 官網下載列表請點此[連結](https://nodejs.org/download/release/v16.7.0/)
- 從有網路連接的機器上獲取 `Node.js` 安裝程式：
點[此](https://github.com/nodejs/node/archive/refs/tags/v16.7.0.tar.gz)下載安裝檔案。
- 將下載的安裝檔案複製到離線環境的客戶端機器
- 在客戶端機器上找到並解壓縮 Node.js 安裝檔案：
- 切換到存放 Node.js 安裝檔案的目錄。
- 使用以下命令解壓縮 Node.js 安裝檔案：

      tar -xvf node-v16.7.0.tar.gz

- 解壓縮完成後，你會得到一個名為 node-v16.7.0 的目錄
- 設定環境變數:
在終端機或命令提示字元中，使用以下命令設定 Node.js 的執行環境變數：

  export PATH=/path/to/node-v16.7.0/bin:$PATH

> 請將 /path/to/node-v16.7.0 替換為實際存放 Node.js 的路徑。
- 驗證安裝：
執行以下指令檢查 Node.js 是否正確安裝：

  node -v
  npm -v

---

## **交易打包命令及腳本**

> 當已經建置好客戶端離線環境，即可至專案根目錄下執行以下運行命令

### <ins>個人設定與服務</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-aply | webpack build -c ./webpack.config.js --env chunk=aply |

### <ins>信用卡</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-card | webpack build -c ./webpack.config.js --env chunk=card |

### <ins>憑證管理</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-crft | webpack build -c ./webpack.config.js --env chunk=crft |

### <ins>外幣存匯</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-fode | webpack build -c ./webpack.config.js --env chunk=fode |

### <ins>投資</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-fun | webpack build -c ./webpack.config.js --env chunk=fun |

### <ins>首頁登入</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-ibap | webpack build -c ./webpack.config.js --env chunk=ibap |

### <ins>登入後首頁</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-ibhm | webpack build -c ./webpack.config.js --env chunk=ibhm |

### <ins>金融理財資訊</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-info | webpack build -c ./webpack.config.js --env chunk=info |

### <ins>貸款</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-loan | webpack build -c ./webpack.config.js --env chunk=loan |

### <ins>個人訊息通知</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-noti | webpack build -c ./webpack.config.js --env chunk=noti |

### <ins>尚無分類</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-oter | webpack build -c ./webpack.config.js --env chunk=oter |

### <ins>繳費繳稅</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-pafe | webpack build -c ./webpack.config.js --env chunk=pafe |

### <ins>臺幣存匯</ins>

| 運行命令 | 腳本
| -------- | -------- |
| npm run bundle-dev-twde | webpack build -c ./webpack.config.js --env chunk=twde |

---

# 上銀-新網銀 後端打包以及環境建置

---