Webpack-Dev-Server 建構測試用 API

前端工程師開發網站的時候通常會先跟後端討論完 API 規格後來開發，我們會需要等待後端的開發時間，但是其實我們可以先透過測試的 API 來先把欄位及邏輯寫好，等 API 開發完成後再進行串接就好，這樣的做法可以省下不少等待的時間加快開發。

現在我們開發網站都會透過Webpack來進行編譯打包，不知道Webpack的人可以先參考看看這個直播。

我們如果要啟動一個本地的 server 開發就會透過 webpack 的一個功能，「webpack-dev-server 」。這個好用的功能可解決我們不少前端在開發上面會遇到的種種問題，包括跨網域存取還有可以建立測試 API 等等…

一般我們要在本地端建立測試 API 有很多工具，例如AxiosMockAdapter 或是 Mock.js 這類型工具來建制，但是今天就讓我來分享如何透過 webpack-dev-server 來建立本地端的測試 API。

开发中 server(devServer)

我們要透過 devServer 裡面的 before 這個生命週期來實現，先來看這個關鍵的程式碼。

devServer:{
  before: function(app, server) {
     app.get('/api/photoList', (req, res) => {
        res.json({ item: photoList})
     })
  },
  https: false,  // 選擇是否有 HTTPS 的 HTTP/2 服務
}

接下來我們來看看 Webapck 的 code

再這邊你可以看到兩個重點

1. 安裝了 express ，然後透過 express 來寫 Router，製作API。
2. 用 require 引入了我資料夾中準備的假資料 json，當成 API 要用到的資料回傳。

實際上你啟動 webpack-dev-server 後你就可以再你的程式內這樣…

axios.get("/api/photoItem").then(res=> {
   console.log(res.data.data)
})
.catch(err=> {
   console.log(err);
})

去 GET 這個 Local 測試的 API，是不是非常的方便。

當然每一種工具都有他得好與壞，沒有說一定要用哪種方式一定是最好，就是看你當下的需求還有規劃，大概就是這樣。

最後

我有開設一個youtube的頻道，每個月不定時週六或日晚上直播跟技術或是經驗相關的分享，有興趣的朋友歡迎追蹤訂閱＋小鈴鐺。

Mike Cheng

工商時間

線上課程 — 職人必修的 RWD 網頁入門班
線上課程 — JavaScript ＆ TweenMax 動態特效速成實戰
線上課程 — 超越入門！Webpack 前端自動化開發
線上課程 — 現代 JavaScript 職人之路｜入門篇
線上課程 — 現代 JavaScript 職人之路｜中階實戰篇