用whistle实现map local

web本地开发调试过程当中，常常须要用本地文件替换请求或者将请求转发到本地的指定服务器，即map local功能，而实际中用到的map local功能每每会遇到各类更加复杂的情形，好比请求url里面包含md5，替换combo请求，替换jsonp请求，有时还须要对不一样页面发出的请求替换不一样文件或目录等等，本文将讲下如何用whistle来实现各类map local功能。

whistle是基于Node实现的跨平台抓包调试代理工具，功能上不只涉及抓包调试代理工具的方方面面，且集成了weinre及自定义的log功能用于调试移动端页面，全部操做只需经过相似hosts的简单配置方式实现，并支持经过插件扩展功能，具体功能及安装使用请直接访问Github：github.com/avwo/whistl…。

whistle的每种操做对应一个协议，其中map local功能主要涉及 file、tpl、xfile、xtpl 四种协议及插件扩展：

文件替换

若是用域名、路径或通配路径的方式匹配，whistle会根据匹配url的剩余路径自动补齐本地文件路径，并自动忽略后面的请求参数：

# 域名匹配
www.test.com E:\workspace\test # 等价于 file://E:\workspace\test 或 file://E:/workspace/test
# Mac或Linux
www.test.com /usr/workspace/test # 等价于 file:///usr/workspace/test

# 路径匹配
www.test.com/abc E:\workspace\test # 等价于 file://E:\workspace\test
# Mac或Linux
www.test.com/abc /usr/workspace/test # 等价于 file:///usr/workspace/test

# 通配符路径匹配
*/ E:\workspace\test # 等价于 file://E:\workspace\test
# Mac或Linux
*/abc /usr/workspace/test # 等价于 file:///usr/workspace/test
复制代码

域名匹配和通配符路径匹配均可以当作路径匹配，区别是：

1. 域名匹配能够匹配带任意端口的改域名url，即 www.test.com file://E:\workspace\test 能够同时匹配 https://www.test.com:8080/xxx，http://www.test.com/xxx 等请求
2. 通配符匹配和域名匹配的区别是通配符路径能够匹配任何域名的对应路径

路径匹配会匹配该路径及其子路径的url，并把超出的路径自动补齐到本地指定的文件路径，如配置规则 www.test.com/abc E:\workspace\test 后，请求 http://www.test.com/abc，https://www.test.com/abc/index.html（容许带请求参数http://www.test.com/abc?xxx，https://www.test.com/abc/index.html?xxx）分别映射到本地文件 E:\workspace\test、E:\workspace\test\index.html，若是对应文件不存在，则返回404。

若是你不想自动补齐，能够配置：

www.test.com <E:\workspace\test> # 等价于 file://<E:\workspace\test>
复制代码

上述配置全部www.test.com域名下的请求都只会被 E:\workspace\test 替换

若是你想指定某个固定的url匹配指定文件，不但愿其子路径也匹配规则，能够用精确匹配：

$www.test.com E:\workspace\test\index.html
复制代码

上述配置只有 http://www.test.com/，https://www.test.com/?xxx 相似根路径url才会匹配，http://www.test.com/abc 则不会匹配规则。

自动忽略url里面的md5串

去掉url里面的md5，能够用两种方式，一种是直接用正则匹配，另外一种是跟下面根据referer替换的方式同样，用reqScrip实现具体用法参考下面的根据referer替换，这边以正则为例：

# www.test.com/abc E:\workspace\test 
/^[^/]+://www\.test\.com/abc/([^?]+)\.[\da-f]+(\.\w+)/i E:\workspace\test/$1$2
# 这里 /$1$2 不能改为 \$1$2，由于 \ 是个转义字符

# 也可用通配符正则匹配
^www.test.com/abc/**.*.*  E:\workspace\test/$1.$3
复制代码

正则匹配或通配符正则匹配没有自动补齐功能，但能够经过正则子匹配实现自动补齐路径的功能，其中，$& 或 $0 表示整个请求url，$1, $2, ..., $9 分别表示正则里面的第1到第10个子匹配，若是你的路径包含 $&，\ 为转义字符，\$x 可让whistle不要进行子匹配替换 。

上述配置相似请求 http://www.test.com/abc/dev/index.ec6abf23.js 会映射到本地文件 E\workspace\test\dev\index.js，有关正则和通配符正则匹配的内容能够参见：匹配模式

替换jsonp请求

因为jsonp请求须要把url里面的callback写入到响应内容里面，这里须要用到whistle的tpl协议，tpl支持用请求参数值替换文件里面对应的 {xxx} 占位符:

www.test.com/cgi-jsonp tpl://E:\test
复制代码

若是 E:\test\ 里面有文件 data.json：

{callback}({"ec": 0})
复制代码

请求 www.test.com/cgi-jsonp/data.json?callback=testCallback，返回：

testCallback({"ec": 0})
复制代码

列表替换

有时静态文件分布的本地的各个目录，但又分不清文件具体在哪一个目录，这时就能够用文件列表替换功能：

www.test.com/abc E:\workspace\test|E:\workspace\test2|E:\workspace\test3
# jsonp请求替换
www.test.com/cgi-jsonp E:\test|E:\test2|E:\test3
复制代码

上述配置匹配规则的请求会依次在各个目录寻找对应文件，若是找不到则返回404。

xfile、xtpl替换

上面file和tpl协议请求找不到对应的匹配文件，会直接返回404，若是想要找不到本地匹配文件时直接请求线上，能够用xfile和xtpl：

www.test.com/abc xfile://E:\workspace\test|E:\workspace\test2|E:\workspace\test3
# jsonp请求替换
www.test.com/cgi-jsonp xtpl://E:\test|E:\test2|E:\test3
复制代码

根据referer替换

在同时开发测试多个页面，且这些页面里面的js、css、图片等静态资源要映射的不一样的目录，又不清楚这些页面静态资源的url结构，这时须要经过请求referer来动态判断规则，能够用whistle的reqScrip实现：

在whistle界面Values中建立一个checkReferer.js：

const referer = headers.referer || '';
if (headers.referer.indexOf('download.html') !== -1) {
	rules.push('*/ E:/test/download');
} else {
	rules.push('*/ E:/test/dev');
}
复制代码

在Rules配置规则：

*.cdn.cn reqScript://{checkReferer.js}
复制代码

*.cdn.cn 的请求会根据它所在页面设置不一样的规则。

请求转发

如今用webpack作构建时，习惯引入webpack-dev-server作内存静态服务器，能够用whistle把对应请求转发到该静态服务器，假设个静态服务器的端口为6666：

*.cdn.cn/test http://127.0.0.1:6666
复制代码

这时请求 https://x.cdn.cn/test/xxx 会被请求 http://127.0.0.1:6666/xxx 替换。

替换combo请求

理论上whistle能够处理全部map local的功能，若是须要一些更复杂的功能，如替换combo请求，能够用插件whistle.combo实现，也能够经过自定义whistle插件简化自身业务的配置。

map loca只是whistle其中一个功能，有关whistle的更多功能请访问Gihtub：github.com/avwo/whistl…。