使用 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 的。

一、搭建静态资源 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！

 

二、动态 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 官网。

若是你有关于环境搭建的问题和建议，欢迎留言交流，也能够关注公众号「猫哥学前班」的「网络编程连载系列」。