一鍵輕鬆設置項目代理

引言

相信各位開發同窗對設置項目代理接觸得很是之多：

• 新同事接手老項目時，須要從文檔中找到代理規則或者詢問熟悉的同過後再設置代理；
• 在不一樣項目間切換時，須要在本身設置的不一樣規則間進行手動切換；
• 代碼執行結果與預期不一樣，debug 許久發現是由於代理規則設置有問題；
• 同一個項目，團隊內不一樣的人設置的代理規則五花八門，差別不小；
• ...

本應專一於項目的開發，卻在配置代理上浪費時間，耗費精力！

爲了解決這個問題，whistle 1.12 版本帶來了新功能，只需一鍵便可輕鬆設置項目代理。

本文假設已安裝 whistle（基於 node.js 的代理工具），若未安裝，請參考 安裝指引。

一鍵設置代理

對於已接入的項目（接入方法)，開發者只須要經過 w2 add 便可配置項目代理，從而着手於項目開發:

1. 在項目根目錄下執行 w2 add 設置項目代理規則
2. 將瀏覽器代理設置爲 whistle 監聽地址 127.0.0.1:8899（若已設置能夠跳過此步）
3. 打開項目鏈接檢查代理是否設置成功。

w2 add [filepath] 命令中 filepath 爲規則配置文件的路徑，可選參數，默認爲當前目錄的 .whistle.js 文件。

接入方法

在項目根目錄下新建 .whistle.js 文件，用 webpack 構建的項目可簡單配置以下:

exports.name = '【本地環境】react-project';
exports.rules = ` ke.qq.com/react-project http://localhost:7474 ke.qq.com/cgi-bin ignore://http # CGI 走線網，不進行代理 `;
複製代碼

.whistle.js 文件的導出需知足：

{
    name, // string 類型，顯示在 whistle GUI 界面的規則名
    rules, // string 類型，項目代理規則
}
複製代碼

在該目錄下執行命令 w2 add 時，若是本地 whistle 裏沒有同名規則則會建立一個並自動啓用，若是存在則會提醒：

The rule already exists, to override it, you must add CLI option --force.
複製代碼

能夠經過 w2 add --force 強制覆蓋當前同名規則。

上述介紹的接入方法是將不一樣項目的代理規則放置於各自代碼的根目錄下，也能夠將不一樣項目的代理規則進行線上集中管理，而後經過 .whistle.js 發送網絡請求異步獲取：

const assert = require('assert);
const pkg = require('./package.json');

module.exports = (cb, util) => {
  // 若是依賴插件，能夠檢查插件
  assert(util.existsPlugin('whistle.combo'), '請先安裝插件npm i -g whisltle.combo');

  // 異步獲取遠程規則
  request('http://example.com/proxy-rules?name=awosome-project').then((result) => {
    cb({
      name: '【本地環境】awosome-project',
      rules: result.rules, // 異步拉取的項目代理規則
    });
  });
};
複製代碼