建立本地服務，及服務代理，支援熱更新
Create http proxy support Hot update
TODO
特別針對老型專案設計，沒有使用構建工具（ webpack、gulp、grunt etc.）
確保你的 nodejs 版本 >= 8.0.0，
解決跨域問題，支援本地開發熱更新
安裝（install）
yarn add @gauseen/web-proxy -D # 推薦
# or
npm i @gauseen/web-proxy -D
複製程式碼使用（usage）
// 首先，在專案根目錄建立 server.js 檔案
複製程式碼// 例子：
// server.js
const path = require(`path`)
const server = require(`@gauseen/web-proxy`)
const options = {
watch: false,
watchStatic: path.join(__dirname, `./demo/`),
serverStatic: path.join(__dirname, `./`),
port: 8008,
proxyTable: {
`/api`: { target: `http://doman.com/`, }
/* `/apiFlag`: {
target: `http://doman.com/`,
pathRewrite: {
// ^/old-path` : `/new-path
// 下面配置是將，/apiFlag 開頭的請求，重寫為 /newFlag，也可為 `` (空)
`^/apiFlag`: `/newFlag`,
}
} */
},
notify: true,
// ignores: [`js`],
callback: function () {
console.log(`Server run success ...`)
},
}
server(options)
複製程式碼options 引數說明：
| 引數 | 說明 | 型別 | 預設 | 是否必選 | 可選項 |
|---|---|---|---|---|---|
watch |
是否開啟熱更新 | Boolean |
false |
是 | – |
watchStatic |
熱更新目錄 | String |
是 | – | |
serverStatic |
靜態服務目錄 | String |
是 | – | |
proxyTable |
要代理的 doman |
Object |
是 | – | |
port |
埠 | Number |
8008 |
否 | – |
notify |
是否在瀏覽器端顯示通知 | Boolean |
false |
否 | – |
ignores |
忽略 watch 檔案格式 |
Array |
– | 否 | [css, html, js] |
callback |
服務啟動成功回撥 | Function |
– | 否 | – |
啟動服務
node server.js
# 或
# 自己配置 npm scripts 執行
# 更改 server.js 檔案後要重啟服務，更改才生效
複製程式碼瀏覽器執行
localhost: <port>/
注：
proxyTable 是個物件，
鍵 為: 請求 URL 的統一標識欄位，如請求介面：http://doman/api/back/login，那麼 api 就是它的標識欄位
值 為: {
target: 要代理的（域名或IP） doman, # (必填)
pathRewrite: { `^/oldFlag`: `/newFlag`, } # (非必填)
}
pathRewrite 欄位作用是防止後端介面比較混亂，沒有統一的識別符號，
這時前端在本地開發時，可以自己新增一個統一識別符號，並使用 pathRewrite 的功能，再讓這個欄位設定為空字元，這樣就可以請求到服務端本來的 URL
複製程式碼歡迎訪問我的個人部落格 乾貨傳送門