Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
avwo opened this issue Nov 29, 2019 · 2 comments
Closed

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

avwo opened this issue Nov 29, 2019 · 2 comments

Comments

@avwo
Copy link
Collaborator

avwo commented Nov 29, 2019

安装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):
      配置whistle代理
      选中whistle代理
  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. 注入 vConsoleeruda 可以用插件: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

@avwo avwo changed the title 【应用示例】基于 Nohost 前端开发环境搭建方式 【应用示例】基于 Nohost 的开发方式 Nov 29, 2019
@Chaya-cai
Copy link

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

@avwo
Copy link
Collaborator Author

avwo commented Dec 8, 2020

@avwo avwo pinned this issue Mar 4, 2021
@avwo avwo closed this as completed Mar 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants