一键轻松设置项目代理「建议收藏」

引言

相信各位开发同学对设置项目代理接触得非常之多：

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