Whistle插件开发-remote-rules

最近公司提供了云IDE服务，这样部分开发工作可以从本地切换到远程机器，同时现在前端也走向了微前端，开发时总是需要走代理。云IDE出现后，意味着代理的地址会随着IDE地址而变化，因此这里驱动出了，解决一键加载远程代理规则的需求。

云IDE出现后，整体开发流程如下

1. 当任务管理系统下发一个story
2. 开发者创建feat/fix分支，CI自动创建一台云IDE开发环境，同时创建出新的whistle代理规则文件
3. CI发送消息告知云IDE地址及whistle代理规则文件地址
4. 开发者点击whistle代理地址，直接加载该规则
5. 开发者开始开发

如上的好处是，开发人员不用手动维护代理规则文件。

为了解决这样的需求，开始whistle插件开发，发现whistle提供了脚手架工具及一些demo，整体开发还是比较顺利的。但有些问题，官网并没有描述很清楚，这里简单总结下，兴许帮到些同行。

开发

大致实现逻辑如下

1. 利用UI Server针对whistle web服务暴露新的URL，支持携带remoteRules参数
2. 插件UI router中处理参数，根据参数值下载rule规则文件，临时保存
3. 调用whistle命令w2 add进行加载
4. 重定向到whistle web rules页面下

插件安装及源码戳这里，兴许帮到些人

使用效果

$ npm i whistle -g

$ npm i whistle.remote-rules -g 
# or

$ w2 i whistle.remote-rules

自动加载远程规则，地址模版如下

http://local.whistlejs.com/whistle.remote-rules/?remoteRules={url}

举个例子

http://local.whistlejs.com/whistle.remote-rules/?remoteRules=https%3A%2F%2Fgist.githubusercontent.com%2Falanhg%2Fa950d216121002d5bb0fd1278789da75%2Fraw%2Fc8bdf23e05c9dc504ea393a0b373cb556df911d8%2Ftest-whistle.js

有了该插件支持，CI方面就可以直接推送如上的地址，开发者点击加载后就可以继续开发调试了。

注意事项

whistle官方文档及案例有些方面描述的不够清晰，这里补充下

1. 插件调试

   # 如果whistle处于运行状态下，需要手动关闭
   $ w2 stop
   
   # 运行whistle，这时是调试模式，插件脚本中的异常或者console打印信息均会在脚本启动的终端打印出来
   $ w2 run

2. 插件开发，热更

   # 脚本修改，实时编译，TS开发时需要
   $ npm run dev
   
   # 监测dist及rules文件，如果有修复会自动更新加载的插件，如果更新，终端会打印reload信息
   $ lack watch

3. 发布

   插件发布，并不需要推送到whistle作者的repo或者whistle-plugins组织下，以个人名义发布即可，只需要注意，whistle约定包名称来确保被whistle识别，比如我开发的whistle.remote-rules

4. whistle-server

   whistle提供了多种server，确定需求从而选择对应的server，比如需要拓展UI服务，实现自定义页面来执行某个动作，比如我这里的暴露URL，实现自动下载远程规则，所以依赖uiServer，而router对应就是自己实现的一些API或者子路由页面

写在最后

Whistle暴露的口子支持基于个人需求可以拓展代理feat，这点还是很赞的。