abc作为一个基于前端目录规范的打包工具,已经帮助用户解决了打包方面的问题,在git迁移之后,我们的线上assets的URL进行了调整,同时,由于g.assets.daily.taobao.net
和g.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
中才行
我们的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还是使用的kissy-min.js的压缩文件,而utils又必须在kissy的debug模式下才会load,所以有些同学就会手动在url上加ks-debug参数,但是线上有些url是不能加任何参数的(比如下单),所以 最简单的办法就是直接把kissy-min替换成kissy。
httpx默认就有这条规则,因为这条规则最常使用,在每个场景下都希望能生效,所以 默认添加于全局场景。
规则的匹配的优先级为自定义场景
> 全局场景
,在dashboard就可以切换当前使用的场景。