用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…。