使用 whistle 替代本地 nginx/webpack 服務

加入鵝廠之後，我發現團隊都在用一款叫做 Whistle 的工具，起初我以為這隻是一款類似 Fiddler/Charles 的普通貨色。然鵝，發現下面這兩種用法之後，我把自己的膝蓋摘下來獻給了制作這款工具的大佬。

如果你還沒用過 whistle，沒關系。隻需兩步：

1. 第一步，Node.js 環境下全局安裝

   npm i -g whistle

   并啟動 whistle

   w2 start

2. 第二步，給 Chrome 浏覽器裝個 SwitchyOmega 的插件，添加一個将所有請求轉發到 127.0.0.1:8899 的代理配置。如下圖所示（Bypass List 部分也記得清掉）

環境準備好之後，我們開始進入今天的姿勢，看 whistle 是如何取代本地 hosts 和 web server 的。

1、搭建靜态資源 server

打開 whistle 管理背景 http://127.0.0.1:8899 ，在左側導航的 Rules 面闆寫入一條規則：

# 規則：自定義域名或URL<空格>本地目錄路徑 （以下示例請替換為自己本地的寫法）
my.demo/bw/ file:///Users/kaiye/Projects/Demo/002-black-white/      

再用浏覽器打開 http://my.demo/bw/ 的網址。Bingo！一個自定義域名的靜态資源伺服器搭建成功！

是不是比 nginx 配置簡單一丢丢？如果安裝了 whistle 的證書，還能直接支援 HTTPS！

2、動态 server 轉發

如果我們把上例中的本地路徑替換成一個本地服務端口，例如 webpack devServer 的端口。那麼就可以實作本地帶端口号的 host 配置功能，同時還能告别複雜的 devServer/nginx rewrite 配置：

// webpack.config.js 配置傳統手藝
module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: ''https://other-server.example.com'',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};      

假設本地 webpack 服務端口号為 8080，whistle 的配置規則示例如下：

# 任意域名綁定到本地任意服務
https://my.demo/ 127.0.0.1:8080
​
# 重寫該域名的後端接口路徑到線上服務位址
https://my.demo/api/ https://backend.example.com/api/
# 或直接轉發到區域網路某台機器的具體端口
https://my.demo/api2/ http://127.0.0.1:3000      

接下來就可以打開 https://my.demo/ 像調試線上環境一樣開發本地環境了。你還可以将 whistle 部署到區域網路伺服器，用來搭建一個多人協作的測試環境（也就是 nohost 解決方案）。

whistle 是一款免費且強大的抓包工具，除了本文提到的靜态 server 和服務轉發功能以外，還提供了大量内置協定用于支援 request/respond 動态修改與注入、websocket 調試、API mock 等功能，借助 whistle plugin 插件生态，不僅能獲得極佳的移動端調試體驗，還能滿足各式各樣的調試需求。更多 whistle 介紹，請通路 whistle 官網。

如果你有關于環境搭建的問題和建議，歡迎留言交流，也可以關注公衆号「貓哥學前班」的「網絡程式設計連載系列」。

歡迎關注我的微信公衆号「貓哥學前班」