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.

Sign up for GitHub

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

puer-proxy 1.0.0版本报错 #55

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

puer-proxy 1.0.0版本报错 #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1f6d2cf
在 `[email protected]` 的基础上添加了自定义代理上下文的功能, 主要是为了实现"能否让代理功能和静态服务功能同时开启?"的需求
ufologist Mar 6, 2017
a325d79
添加项目说明
ufologist Mar 6, 2017
39e8ae6
添加项目说明
ufologist Mar 6, 2017
c71f9c0
添加与 puer-mock 搭配使用的例子
ufologist Mar 6, 2017
2b6c1aa
添加与 puer-mock 搭配使用的例子
ufologist Mar 6, 2017
618f040
添加与 puer-mock 搭配使用的例子
ufologist Mar 6, 2017
0b54e75
添加 dev-serv 的说明
ufologist Mar 7, 2017
8404563
修改说明文档
ufologist Jun 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# CHANGELOG

* v1.0.0 2017/3/6

在 `[email protected]` 的基础上添加了自定义代理上下文的功能, 主要是为了实现[#36](https://github.com/leeluolee/puer/issues/36 "能否让代理功能和静态服务功能同时开启?")的需求
245 changes: 46 additions & 199 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,235 +1,82 @@
# puer-proxy

[![NPM version][npm-image]][npm-url] [![changelog][changelog-image]][changelog-url] [![license][license-image]][license-url]

[npm-image]: https://img.shields.io/npm/v/puer-proxy.svg?style=flat-square
[npm-url]: https://npmjs.org/package/puer-proxy
[license-image]: https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square
[license-url]: https://github.com/ufologist/puer-proxy/blob/master/LICENSE
[changelog-image]: https://img.shields.io/badge/CHANGE-LOG-blue.svg?style=flat-square
[changelog-url]: https://github.com/ufologist/puer-proxy/blob/master/CHANGELOG.md

> __more than a live-reload server , built for efficient frontend development__

> __Puer - more than a live-reload server , built for efficient frontend development__
在 `[email protected]` 的基础上添加了自定义代理上下文的功能, 主要是为了实现[#36](https://github.com/leeluolee/puer/issues/36 "能否让代理功能和静态服务功能同时开启?")的需求, 与 [puer-mock](https://github.com/ufologist/puer-mock) 配合来使用(必须规范所有的 mock api 都在一个根路径下, 例如 `/api/`)

[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/leeluolee/puer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[中文指南](http://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/)


##Features


1. __create static server__ at target dir (default in current dir)
2. __auto reload__ : editing css will update styles only, other files will reload the whole page.
3. __weinre integrated__ use `-i` options
4. __proxy server mode__, use it with an existing server
5. __http request mock__ by `-a` addon，the addon is also __live reloaded__
6. __connect-middleware__ support


##install
`npm -g install puer`


##Usage

###Command line

in most cases

```bash
cd path/to/your/static/dir
puer
```

![puer-step-1](http://leeluolee.github.io/attach/2014-10/puer-step-1.gif)

puer will launch the browser for you. all pages will reload when you edit them

### __full options__

To list all of puer's options use `puer -h`
添加了如下命令行参数(都是针对代理功能的), 为了不与原来的 `puer` 冲突, 修改命令为: `puer-proxy`

```bash
ubuntu-21:19 ~ $ puer -h

Usage: puer [options...]

Options:
-p,--port <port> server's listen port, 8000 default
-f,--filetype <typelist> fileType to watch(split with '|'), default 'js|css|html|xhtml'
-d,--dir <dir> your customer working dir. default current dir
-i,--inspect start weinre server and debug all puer page
-x,--exclude exclude file under watching(must be a regexp), default: ''
-a,--mock <file> your mock's path
-t,--target <url> remote proxy server
--no-reload close auto-reload feature,(not recommended)
--no-launch close the auto launch feature
-h,--help help list

-c,--context <proxyContext> proxy context
-r,--rewrite <pathRewrite> proxy pathRewrite
```

PS: 只修改了 `lib` 目录的代码, 没有同步修改 `src` 目录中的 `.coffee` 源码...

###__mock request__
## puer-proxy 增强功能的使用方法

During development，you may need to mock a request . use `-a <addon>` to help you mock a dynamic api
首先当然得安装了, 全局安装还是仅项目安装都可以, 不过一般推荐全局安装了

```shell
puer -a route.js
```

a sample `route.js` looks like:

```javascript
// use addon to mock http request
module.exports = {
// GET
"GET /v1/posts/:id": function(req, res, next){
// response json format
res.send({
title: "title changed",
content: "tow post hahahah"
})

},
// PUT POST DELETE is the same
"PUT /v1/posts/:id": function(){

},
"POST /v1/posts": function(){

},
"DELETE /v1/posts/:id": function(){

}
}

```


__[【check the usage record 】](http://leeluolee.github.io/attach/2014-10/puer-step-2.gif)__

It is just a config for routers, you need export an [Object] containing router config. The keys join with 【METHOD】 and 【PATH】, and the values represent the callback。This function is based on [express](http://expressjs.com)'s router, you can check its documentation for more help。

example from above is just equal code in express like:

```javascript
app.get("/v1/posts/:id", function(req, res, next){
// response json format
res.send({
title: "title changed",
content: "tow post hahahah"
})
})

app.put("/v1/posts/:id", function(){})
app.post("/v1/posts", function(){})
app.delete("/v1/posts/:id", function(){})
```


Once `route.js` is changed, puer will refresh it. There is no need to restart puer.


__the route.js style__

__Function __ : just like showed before, you can use the express's Response and Request Method

__String__: if the passin is a [String], puer will find the File first, if file is not exsit, will directly response with the origin [String]

```javascript
{
"GET /v1/posts/:id": "hello.html"
}
```

__Object | Array__: will respone a json format.

```javascript

{
"GET /v1/posts/:id": {message: "some message"}
"GET /v1/posts": [{message: "some message"}]
}

```


###__proxy support__

you can use `-t` or `--target` to use puer with an exsiting server. For example, say you already have a server running at port 8020.

```javascript
puer -t http://localhost:8020
npm install puer-proxy -g
```

__[【check the record for proxy mode】](http://leeluolee.github.io/attach/2014-10/puer-step-3.gif)__

You can use 【addon】 with【 target】 for more powerful usage。
假设你要代理的后端接口在 `http://localhost:8080`, 一般的使用方法为同时指定代理的上下文并使用路径重写功能

```shell
puer-proxy -c /api/ -r -t http://localhost:8080
```
puer -t http://localhost:8020 -a route.js
```
__[【check the usage record 】](http://leeluolee.github.io/attach/2014-10/puer-step-4.gif)__

这样达到的效果是: 当请求 `http://localhost:8000/api/path/to/something` 时将请求代理给 `http://localhost:8080/path/to/something` 来处理, 默认的 `-r` 参数会将上下文路径(即这里的 `/api/`)重写为空字符串再提交给代理的服务器

### use the builtin debugger (through weinre)

type `-i` to bootstrap the weinre, the client script is injected for you in every page through puer, click the 【nav to weinre terminal 】button or find the weinre server directly at port 9001
如果你习惯将所有的 mock api 都定义在 `/api/` 路径下, 那么可以更简单的运行下面的命令

```shell
puer -i
puer-proxy -r -t http://localhost:8080
```
__[【check the usage record 】](http://leeluolee.github.io/attach/2014-10/puer-step-5.gif)__

###use as [connect|express]-middleware

下面详情解释每个参数的含义

```javascript
var connect = require("connect")
var path = require("path")
var http = require("http")
var puer = require("puer")
var app = connect()
var server = http.createServer(app)
* 自定义代理的上下文(`-c,--context`), 默认为 `/api/`

var options = {
dir: "path/to/watch/folder",
ignored: /(\/|^)\..*|node_modules/ //ignored file
}
```shell
puer-proxy -c /api/ -t http://localhost:8080
```

app.use(puer.connect(app, server , options)) //use as puer connect middleware
// you must use puer middleware before route and static midleware(before any middle may return 'text/html')
app.use("/", connect.static(__dirname))
即当请求 `http://localhost:8000/api/path/to/something` 时将请求代理给 `http://localhost:8080/api/path/to/something` 来处理

注意: **以斜杠结尾, 否则会匹配到 /apipath/to/something 这样的路径**
* 关闭路径重写功能

server.listen(8001, function(){
console.log("listen on 8001 port")
})
不在命令行传入 `-r` 参数, 则请求的路径给代理时不会被重写
* 自定义路径重写功能(`-r,--rewrite`)

```
You must use puer middleware before route and static middleware(before any middle may return 'text/html')


### Other

<a name="client-event"></a>
#### client event
```shell
puer-proxy -c /api/ -r /abc/ -t http://localhost:8080
```

puer will inject a namespace __`puer` in global__. it is a Emitter instance. has `on`, `off` and `emit`.
即当请求 `http://localhost:8000/api/path/to/something` 时将请求代理给 `http://localhost:8080/abc/path/to/something` 来处理
* 与 `puer-mock` 搭配使用的例子

you can register `update` event to control the reload logic
需要先安装好 [puer-mock](https://github.com/ufologist/puer-mock), [具体使用场景](https://github.com/ufologist/puer-proxy/blob/master/puer-proxy-mock.md)

```shell
puer-proxy -a _mockserver.js -c /api/ -r -t http://localhost:8080
```

```javascript

puer.on("update", function(ev){
console.log(ev.path) // the absolute path , the file change
console.log(ev.css) // whether css file is change
if(ev.path.match(/\.js$/)){
ev.stop = true; // if you set ev.stop = true. the reload will be stoped;
}

})

```

Example above means that: if js file is changed, reloading won't be actived.
## puer 原本功能的使用方法

其他使用说明请参考官网文档 [leeluolee/puer](https://github.com/leeluolee/puer), 非常感谢 [leeluolee/puer](https://github.com/leeluolee/puer) 给我们带来了很多效率的提升.

## 原来的实现方式

###LICENSE
MIT
* [dev-serv](https://github.com/ufologist/dev-serv "开发时使用的专属服务器")
0 bin/puer → bin/puer-proxy
100755 → 100644
View file
Open in desktop
File renamed without changes.
6 changes: 6 additions & 0 deletions lib/cli.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 34 additions & 13 deletions lib/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading