Skip to content

Instantly share code, notes, and snippets.

@czy88840616
Last active December 21, 2015 12:29
Show Gist options
  • Save czy88840616/6305944 to your computer and use it in GitHub Desktop.
Save czy88840616/6305944 to your computer and use it in GitHub Desktop.

让httpx代理kissy-cake目录

abc作为一个基于前端目录规范的打包工具,已经帮助用户解决了打包方面的问题,在git迁移之后,我们的线上assets的URL进行了调整,同时,由于g.assets.daily.taobao.netg.tbcdn.cn新域名的启用,我们的代理方案又有了新的变化。

  • build目录和src目录的问题
  • 本地目录的代理
  • g.assets.daily.taobao.net的ip和原本的相同

而httpx就是为了解决这些问题而产生的。

使用

httpx也是基于node编写,文档在这里:http://github.com/czy88840616/httpx/wiki

提前安装

windows:

npm install -g httpx

linux/mac:

$ sudo npm install -g httpx

而启动命令则是 tt 默认端口80,如果配合其他工具使用,可以用反向代理,后期将直接和vmarket集成。

同时 需要绑定host到127.0.0.1,如果不想绑定,可以走PAC的方式(还未实现)

背景

httpx是基于规则来配置的,总体说来还是比较简单的。

我们首先有一些准备工作,假定一个目录作为gitlab上assets的根目录,比如D:\project\govauction-assets,这个目录已经是一个kissy-cake结构的目录,使用abc来进行打包,具体的目录结构如下:

.
│  .gitattributes
│  .gitignore
│  abc.json
│  Gruntfile.js
│  package.json
│  README.md
│  
├─build
│  ├─common
│  │      package-config-min.js
│  │      package-config.js
│  │      
│  ├─pages
│  │  │
│  │  └─publish
│  │      └─page
│  │              index-min.css
│  │              index.css
│  │              index-min.js
│  │              index.js
│  │              
│  └─widget
│      
├─node_modules
│                      
└─src
    ├─common
    │      package-config.js
    │      
    ├─pages
    │  │              
    │  └─publish
    │      └─page
    │          │  index.css
    │          │  index.js
    │          │  
    │          └─mods
    │                  addressMap.js
    │                  auctionCycle.js
    │                  
    ├─utils
    │  │      
    │  └─updateDetail
    │          index.js
    │          
    └─widget

为了看的更清楚,我做了一些精简。 这个应用有一个名为publish的page,同时有着common、utils和widget目录

第一步添加规则

启动httpx之后,打开配置页(http://127.0.0.1)

从上面目录结构看, publish在页面中的访问路径为 http://g.assets.daily.taobao.net/tb/govauction/1.0.0/pages/detail/page/index-min.css(js)

我们现在想要把http://g.assets.daily.taobao.net/tb/govauction/1.0.0这整个代理到本地目录D:\project\govauction-assets\src中才行

最简单的做法,在规则库中创建一条规则,比如直接填入path

我们的httpx还支持正则,所以为了以后的方便,我们可以这么加/tb/auction/(\d+[.]){2}\d+,这样这个库的任意版本号都会被代理了

添加完之后的规则库

记住,这个时候规则还没有生效,我们 需要把这条规则添加到场景中。如果是新安装的,那么httpx默认会有两个场景,全局场景(有一条kissy去min)和自定义场景一。

ps:先别添加,先往下看


到这里大家会想到一个问题,假如规则生效,那么这个时候我们的url会变成D:\project\govauction-assets\src\pages\detail\page\index-min.css(js),但是src中只有index.css(js),依旧取不到文件,当然我们可以写一个很复杂的正则,用$1来替换结果,当然,要一下子写出来还略复杂了。

有些同学就会建第二个规则把-min去掉,比如

添加到场景中之后会发现, 当匹配到第一条规则之后,后面的规则就不会再被匹配了,这就是场景规则的排他性。

既然作者考虑到了这个问题,那么怎么才能解决呢?

这就用到了httpx的新特性: 组合规则

第二步组合规则

选择之前添加的两条规则->在下拉菜单中选择"合并规则"->调整第一条规则(主规则)->填写规则名,保存。

PS:因为组合规则是根据第一条规则(主规则)来进行第一步的匹配的,当主规则匹配到了之后才会继续执行组合规则中的其他规则,假如去掉-min作为主规则,那么其他任意带-min的文件都会走这条组合规则,而场景中剩下的其他规则就不会匹配了。

第三步添加到场景

最后选中刚创建的组合规则,直接添加到场景启用即可。


kissy-min和utils的问题

由于kissy还是使用的kissy-min.js的压缩文件,而utils又必须在kissy的debug模式下才会load,所以有些同学就会手动在url上加ks-debug参数,但是线上有些url是不能加任何参数的(比如下单),所以 最简单的办法就是直接把kissy-min替换成kissy

httpx默认就有这条规则,因为这条规则最常使用,在每个场景下都希望能生效,所以 默认添加于全局场景。

规则的匹配的优先级为自定义场景 > 全局场景 ,在dashboard就可以切换当前使用的场景。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment