一、場景/用途
前端代理的用途，相信大家都清楚。應用場景很多，如——
1. 將線上的靜態資源文件（JS、CSS、圖片）替換為本地相應的文件，來調試線上（代碼都被壓縮過）的問題； 2. 本地開發過程，當后端接口未就緒的情況下（也就是前端和后端同學並行開發），將AJAX接口映射於本地文件； 3. 將測試環境或者線上環境的AJAX接口的數據映射於本地，反過來說，也就是開啟本地的服務，本地的服務拉取的數據來自測試環境或者線上環境的數據（因為此時測試環境或者線上環境的服務比較穩定，還有，主要此時，測試同學基本都是基於測試環境來注明bug，所以此時可以直接將測試環境的數據來模擬本地拉取的數據，而不是用於自己模擬一套本地數據）
上述三個場景比較普遍，需要做代理映射的方面基本在后端服務接口及靜態資源（頁面代理當然也是可以，只不過場景不多）。
二、工具介紹
直接上官網吧，https://github.com/goddyZhao/nproxy，在git上搜索nproxy，會出現不少五花八門的nproxy，可別用錯。來自作者GoddyZhao，牛叉的不得了。
基於node的代理服務工具，具體原理，我也不知，暫時停留在應用的階段，能好好把它應用到極致，也是一個收獲。
從官網中，作者提到幾款流行的代理工具。下面是這些流行代理工具的對比圖：
當然，上面的列舉中我個人並沒有真正去用過除了fiddler和nproxy之外的代理，當然還有一個web服務器nginx同樣可以當做前端代理工具來使用。
如作者所說，nproxy的優勢主要在這三個方面——
A: 支持Mac、Linux以及windows
D: 支持多個文件合並一個文件的替換
E: 支持目錄替換
大家可以根據它的優勢，可以適當的去做本地及線上文件的映射關系（可以用流行構建工具如Grunt、Gulp、Webpack、Fis等），來最大化呈現代理工具nproxy的優勢。
至於，nproxy的具體使用，在這兒不copy了。主要注意要對瀏覽器使用代理進行端口配置，個人推薦chrome來去做，安裝個chrome的代理工具插件會更加方便（如ProxySwitchySharp）。
下面是代理文件配置的模板文件
module.exports = [ // 1. replace single file with local one { pattern: 'homepage.js', // Match url you wanna replace responder: "/home/goddyzhao/workspace/homepage.js" }, // 2. replace single file with web file { pattern: 'homepage.js', // Match url you wanna replace responder: "http://www.anotherwebsite.com/assets/js/homepage2.js" }, // 3. replace combo file with src with absolute file path { pattern: 'group/homepageTileFramework.*.js', responder: [ '/home/goddyzhao/workspace/webapp/ui/homepage/js/a.js', '/home/goddyzhao/workspace/webapp/ui/homepage/js/b.js', '/home/goddyzhao/workspace/webapp/ui/homepage/js/c.js' ] }, // 4. replace combo file with src with relative file path and specified dir { pattern: 'group/homepageTileFramework.*.js', responder: { dir: '/home/goddyzhao/workspace/webapp/ui/homepage/js', src: [ 'a.js', 'b.js', 'c.js' ] } }, // 5. Map server image directory to local image directory { pattern: 'ui/homepage/img', // must be a string responder: '/home/goddyzhao/image/' //must be a absolute directory path }, // 6. Write responder with regular expression variables like $1, $2 { pattern: /https?:\/\/[\w\.]*(?::\d+)?\/ui\/(.*)_dev\.(\w+)/, responder: 'http://localhost/proxy/$1.$2' }, // 7. Map server image directory to local image directory with regular expression // This simple rule can replace multiple directories to corresponding locale ones // For Example, // http://host:port/ui/a/img/... => /home/a/image/... // http://host:port/ui/b/img/... => /home/b/image/... // http://host:port/ui/c/img/... => /home/c/image/... // ... { pattern: /ui\/(.*)\/img\//, responder: '/home/$1/image/' } ];
三、使用體驗
根據我們常碰到的場景，舉幾個例子——
單文件映射：
{ pattern: 'http://test-qian.genshuixue.com/asset/js/registerCard_68edda4ec0.js', responder: '/Users/bjhl/Desktop/workplace/qianqian-frontend/asset/js/registerCard.js' //must be a absolute directory path }
要注意，要寫本地文件的絕對路徑。
映射目錄：
{ pattern: /asset\/js/, responder: '/Users/bjhl/Desktop/workplace/qianqian-frontend/output/asset/js/' }
這個的應用場景，加入我的本地構建一次項目代碼（非壓縮版本），如果測試環境的代碼同樣沒有壓縮，那么我就可以順利使用本地目錄映射了。如果測試環境的代碼是壓縮過（這里我簡單講一下使用md5的方式）的，通過正則來進行映射——
{ pattern: /^http:\/\/test-qian.genshuixue.com\/asset\/js\/(.*)_\w{10}.js$/, responder: '/Users/bjhl/Desktop/workplace/qianqian-frontend/output/asset/js/$1.js' }
上面僅僅映射js文件，如果我想要同時樣式asset目錄項目的css文件，沒有問題，如下配置——
{ pattern: /^http:\/\/test-qian.genshuixue.com\/asset\/(.*)_\w{10}\.(js|css)$/, responder: '/Users/bjhl/Desktop/workplace/qianqian-frontend/asset/$1.$2' }
玩兒好正則表達式，怎么美妙的映射方式你都可以構建。
對於多文件的映射方式，對於簡單的js文件拼接方式，還行，否則，就要考慮文件的順序了。這里舉個小例子：
{ pattern: 'http://test-tianyan.genshuixue.com/src/dep/base.js', responder: [ '../js-common/dep/requirejs/require.min.js', '../js-common/dep/angular/angular-1.2.16.js', '../js-common/dep/angular-ui-router/release/angular-ui-router.js', '../js-common/dep/angular/ui-bootstrap-tpls-0.11.2.js' ] }
對nproxy的使用過程，下面截個圖說明一下：
對於nproxy，啟動一次就可以了。它會監控配置文件的實施變更。也就是上面的[WARN]。上面的[INFO]代表匹配成功的請求路徑。[ERROR]代表網絡異常或者匹配規則配置錯誤，需要重新配置匹配規則。
一般情況下，建議nproxy的配置文件（如nproxy-conf.js）放在項目工程同級目錄下，沒有其他好處，維護方便而已。
OK，對於nproxy的使用體驗就寫這么多。
跨平台前端代碼調試神器，大家試試。