一键轻松设置项目代理

引言

相信各位开发同窗对设置项目代理接触得很是之多：

• 新同事接手老项目时，须要从文档中找到代理规则或者询问熟悉的同过后再设置代理；
• 在不一样项目间切换时，须要在本身设置的不一样规则间进行手动切换；
• 代码执行结果与预期不一样，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, // 异步拉取的项目代理规则
    });
  });
};
复制代码