成都高速公路网站建设招标,建设电子商务网站的花费,电子工程网 ofweek,wordpress在线查看word插件大家好#xff0c;我是若川#xff0c;今天推荐腾讯前端团队的这篇好文。whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源#xff0c;有不少同学问了 whistle 相关的问题#xff0c;本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发… 大家好我是若川今天推荐腾讯前端团队的这篇好文。whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源有不少同学问了 whistle 相关的问题本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发中使用 whistle 。一、使用webpack devServer的项目项目准备如今大部分的前端项目是以 webpack 作为开发和构建工具进行项目开发的。我们将以这样一个最常见的场景即以 webpack 开启本地 devServer 进行开发和调试的方式展示如何在这样的前端项目中结合使用 whistle 。我们以一个 create-react-app 开启的项目为事例来进行展示。首先假定有一个以 create-react-app 新建的名为 my-app 的前端项目create-react-app my-app
cd my-app
npm run start会在浏览器中开启一个 localhost:3000 的 tab这是我们常见的一个本地前端开发的场景。本地 host 的弊端一般情况下我们可以直接在 localhost 下进行本地的调试开发。但是基于 localhost 的本地开发有不少局限性用户身份相关的部分功能如登陆功能cookie 读取等对客户端的域名有限制使用 localhost 这个 host 可能会遇到限制。使用 localhost 进行本地开发业务代码中可能需要进行一些额外的逻辑判断如针对本地域名和线上域名做行为区分等。配置 whistle为了解决上述问题根据我们的实践经验本地开发时通过线上真实域名访问本地前端项目似乎是一种更加有效的开发方式。假设我们这个本地项目的线上真实域名为 qq.ketang.com 则我们的目标即是通过 qq.ketang.com 访问和调试本地的 my-app 前端项目。下面我们将演示如何使用 whistle 实现这个目标操作。1、配置 whistle 规则打开 whsitle 的规则配置地址 127.0.0.1:8899 , 依次进行如下操作:- 选择 Rules 选项卡- 双击开启 Default 配置其后方出现绿色的打勾即为开启成功- 在右侧规则编辑面板中输入以下规则qq.ketang.com/ http://127.0.0.1:3000/
- 选择 Save2、启用 proxy选择 SwitchyOmega 插件的 proxy 模式随后,在浏览器中访问地址 https://qq.ketang.com, 就能成功访问到我们本地的 my-app 项目了。现在我们就可以用项目的线上地址来调试本地项目而不用使用 127.0.0.1:3000 这样的本地地址了。whislte 做了什么这其实是 whislte 中的配置规则起了作用qq.ketang.com/ http://127.0.0.1:3000/这条规则将所有 qq.ketang.com/及其子路径下的请求转发到了http://127.0.0.1:3000/下。whistle 的强大功能之一就是提供了各种模式的规则匹配以应对前端开发中的不同场景上面这条只是一条最简单的规则。如果你想现在就对 whistle 的配置规则有个更全面和清晰的认识可以参考以下链接# whistle 配置方式
https://wproxy.org/whistle/mode.html# whistle 规则的模式匹配
http://wproxy.org/whistle/pattern.html即使你有没细细翻阅又或者没有很好地理解 whistle 的配置规则也没关系下面我们将继续以这个项目为例结合几个常见的开发场景告诉开发者应该如何配置常见的 whislte 规则。忽略子路径下的 cgi 接口转发在我们的 my-app 项目中如果项目中涉及到同域下子路径的后端接口如qq.ketang.com/cgi-proxy/xxxxx 我们的初衷是 cgi 接口不需要转发依然走线上即可。但是如果按照目前的配置该 cgi 接口也会被转发至本地的相应路径这显然不是我们希望看到的结果。# bad, 不是我们所希望的
# qq.ketang.com/cgi-proxy/xxxxx 也会转发至 http://127.0.0.1:3000/cgi-proxy/xxxx
qq.ketang.com/ http://127.0.0.1:3000/此处需要使用 excludeFilter 规则# good使用excludeFilter规则, 路径匹配
# qq.ketang.com/cgi-proxy/ 及其子路径下的请求不会被转发至 http://127.0.0.1:3000/cgi-proxy/
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter://qq.ketang.com/cgi-proxy/以上我们在 excludeFilter 里采取的是路径匹配此外我们还可以采取通配符匹配或者正则匹配来实现这一功能# also good, 使用excludeFilter规则, 通配符匹配
# qq.ketang.com/cgi-proxy/, qq.ketang.com/cgi-bin/ ... 这类的请求都不会被转发
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter://^qq.ketang.com/cgi-*# also good, 使用excludeFilter规则, 正则匹配
# qq.ketang.com/cgi-proxy/, qq.ketang.com/cgi-bin/ ... 这类的请求都不会被转发
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter:///^\w://qq\.ketang\.com/cgi-/有读者可能会疑惑为什么以上正则匹配中的//qq 的//没有转义这是因为在 whistle 内部实际上是调用了new RegExp 的方式进行构造正则已经自动做了转义如果不放心那么写成 //qq 也可以。关于模式匹配的具体规则可以参考官方文档# whistle 规则的模式匹配
http://wproxy.org/whistle/pattern.html特定 cgi 接口的 mock一个常见的场景是我们需要对某个 cgi 接口的返回数据进行改造以模拟前端的多种 case whistle 有多种方式可以帮助开发者实现该功能。假设有一个 cgi 接口路径为/cgi-proxy/getMyName, 则本地 mock 的方式有以本地文件作为响应# qq.ketang.com/cgi-proxy/getMyName 以本地的//User/dug/test/getMyName.json文件作为响应,
qq.ketang.com/cgi-proxy/getMyName file:///User/dug/data/getMyName.json编辑在线文件作为响应如果不想用本地文件也可以直接用 whistle 提供的在线文本功能。在 whislte 的配置界面中-选择 “Values”-点击 “Create”, 输入自定义的文件名此处为ans.json-选中新建的文件在右侧的编辑栏中输入作为响应的内容# qq.ketang.com/cgi-proxy/getMyName 以Values面板中的ans.json作为响应
qq.ketang.com/cgi-proxy/getMyName file://{ans.json}使用 xfile 模式xfile 模式和上述的 file 模式功能基本一致xfile 和 file 的唯一区别是 file 找不到对应文件返回404而xfile则是继续请求线上资源。# xfile和file基本功能一致只是若找不到对应文件xfile将会继续请求线上资源
qq.ketang.com/cgi-proxy/getMyName xfile://{ans.json}
二、无构建工具的传统前端项目不少老的项目由于种种原因没有使用构建工具来构建前端 JSCSS 等前端资源。对于这种项目我们希望用本地的对应资源来进行开发和调试。比如在我们现在需要对一个老项目进行迭代项目的线上域名为qq.ketang.com, 这次改动主要涉及到以下两个文件!-- index.html --
...link relstylesheet href/assets/css/main.css typetext/css
...
script srcassets/js/module/my.js
在 whislte 中我们需要配置规则# 分别将线上的css和js的访问 指向本机的项目路径qq.ketang.com/assets/css/ xfile:///User/dug/myWork/ketang_pro/assets/css/qq.ketang.com/assets/js/ xfile:///User/dug/myWork/ketang_pro/assets/js/之后我们在浏览器访问 qq.ketang.com其中对于/assets/css/ 和/assets/js/路径下的请求将会以本地项目目录下的对应文件响应然后我们就能在本地修改和调试项目代码了。三、以插件支持特殊的需求场景有一些特殊的应用场景依靠 whistle 的基础功能可能无法实现。但是whistle 支持自定义插件来拓展功能同时社区也有一些插件的积累。例如假设项目中有一个 combo 的 url 请求为http://i.cdn.com/??x.js,y.js,z.js 。通过社区的 whistle.combo 插件可以实现将 combo url 切割成数组[x.js, y.js, z.js]并分别组合成 http://i.cdn.com/x.js, http://i.cdn.com/y.js, http://i.cdn.com/z.js关于插件 whistle.combo 详见# whisle.combo
https://github.com/whistle-plugins/whistle.combo另外这里有一份 whistle 的插件集合可以在里面搜寻是否有满足自己需求的插件。# whislte 插件列表
https://github.com/whistle-plugins更多关于 Nohost 的信息请点击“阅读原文”。常驻推荐阅读若川知乎高赞有哪些必看的 JS库我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办常驻末尾你好我是若川江西人~(点击蓝字了解我)历时一年只写了一个学习源码整体架构系列 有哪些必看的JS库jQuery、underscore、lodash、sentry、vuex、axios、koa、redux关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以 分享、点赞、在看 呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
