【应用示例】基于 Nohost 的开发方式

[avwo]

安装Node

1. 下载及安装Node：Node官网

安装工具

1. 安装whistle及所需插件：

   npm i -g whistle whistle.nohost-xxx

   Mac 或 Linux 可能需要加 sudo：

   sudo npm i -g whistle whistle.nohost-xxx

   其中，whistle.nohost-xxx 用于切换nohost环境的whistle插件（实现参考：https://github.com/nohosts/whistle.nohost-imweb），主要用于选择后台测试环境，前端无需本地配置后台环境，具体操作看后面介绍。

2. 启动whistle：

   w2 start

   Mac是如果用brew安装Node可能会出现命令找不到问题，手动配下path，或者网上找下解决方案

3. 配置代理：

   • 安装Chrome插件：SwitchyOmega
   • 配置代理参数（whistle默认端口为 8899）：
     
     

4. 打开whistle界面：http://local.whistlejs.com

5. 安装whislte根证书：https://wproxy.org/whistle/webui/https.html

上述操作只在第一次开发项目需要安装，后面最多只需在重启电脑时启动下whistle即可：w2 start

开始工作

1. 检出项目代码（以 agency-react 为例）：

   git clone http://git.test.com/xxx/agency-react.git

2. 检出代码后，进入项目根目录安装依赖：

   tnpm i

3. 一键配置本地映射规则：

   w2 add

4. 启动本地构建：

   npm run dev

5. 打开 whistle界面 > Plugins > nohostenv插件界面 选择对应后台测试环境：
   

所有项目的本地映射规则都放在项目的 .whistle.js 文件中，并通过 w2 add 命令自动设置到whistle，无需手动配置项目的本地环境；所有公共环境都在nohost上配好，前端无需配置后台环境，后台也无需配置前端环境，产品测试无需配置任何环境。

页面调试

1. 注入 vConsole 或 eruda 可以用插件：https://github.com/whistle-plugins/whistle.inspect
2. 查看指定页面错误及页面console输出的信息：http://wproxy.org/whistle/webui/log.html
3. 通过weinre查看修改指定页面的DOM节点：http://wproxy.org/whistle/webui/weinre.html

更多功能参考：https://github.com/avwo/whistle

[Chaya-cai]

你好 .whistle.js文件有示例吗，具体是怎么配置账号和环境的呢

[avwo]

https://wproxy.org/whistle/cli.html