The safest way to try to get what you want is to try to deserve what you want

puer 超级‘低碳’的工具

Posted on By Frank·J

什么是 puer

gitHub上的原话是:Puer - more than a live-reload server , built for efficient frontend development;Puer(官方翻译为普洱!–.)大致意思就为不仅是实时刷新的服务器,更是一款高效的前端开发工具。

我为什么用 puer

最近在做移动端的项目,由于没有使用任何兼容性的框架,导致了在不同的系统不同浏览器上表现出了很多奇奇怪怪的差异,但是PC端的浏览器模拟测试又没有表现出来,因此不得不做真机测试(不然测试人员看到这样代码会杀了我的!)。我之前使用的是http-server也非常好用,但是现在公司给我配的电脑有问题无法使用,所以不得不使用别的工具,因此选中了puer

puer 能干什么

  • 创建一个静态服务器
  • 实时刷新(类似于热替换)
  • 提供简单的mock请求的配置功能,并且配置也是自动更新
  • 集成了weinre,并提供二维码地址,方便移动端的调试
  • 可用作代理服务器,调试开发既有服务器的页面,可与mock功能配合使用
  • 可以作为connect中间件使用(前提是后端为nodejs,否则请使用代理模式)

安装

首先确保你已经安装了nodejs

使用 npm 全局安装 puer

npm install puer -g

输入 puer -h 查看 help

下面简单说一下相关的命令,什么?我的翻译带椒盐味!那你去看英文版:

Options: -p,–port 服务器监听的端口,默认为:8000 -f,--filetype 监听的文件类型(使用 '|' 分割), 默认监听 'js|css|html|xhtml' -d,--dir

自定义工作路径,默认为当前路径 -i,--inspect Weinre服务器启动和调试所有 `puer` 页 -x,--exclude 排除监听的文件(必须为正则), 默认不排除: '' -a,--mock 你的 `mock` 路径 -t,--target 启动远程代理服务器 --no-reload 关闭自动重新加载功能(不推荐) --no-launch 关闭自动启动功能 -h,--help 帮助命令列表

使用

在项目文件下启动终端

puer

访问 http://localhost:8000/ 你就能看到你的项目文件了,此时 puer 会生成一个二维码,你可以使用移动端设备(前提要在同一个网络环境下)扫描二维码或者直接访问页面提示的路径就可以进行真机测试了。不得不说在开发静态页面或者关注点在样式和排版上时,这个简单的功能意义非凡,特别是双屏的时候,可以完全解放你的F5键。

使用 mock

本地使用 mock 模拟服务器,假设你的静态页面开发到一定程度,需要与服务器端交互了,而后台服务还完全无法联调,这其实是属于最简单的前后端分离开发都会遇到的场景。

下面给一个简单的demo:

// 新建一个 route.js 文件,用来模拟服务器端
module.exports = {
  // GET
  "GET /test:name": function(req, res, next){
	// response json format
    res.send({
      name: "Frank",
    })
  },
  // PUT POST DELETE is the same
  "PUT /test:name": function() {
  	// ...
  },
  "POST /test:name": function() {
  	// ...
  },
  "DELETE /test:name": function() {
  	// ...
  }
}

它其实就是一段nodejs程序,输出是一配置对象,key的空格前代表的是请求Method,后半部分是请求路径,而value代表回调函数和express的路由中间件是一致的,传入的request和response对象,相较于原生的提供了一些额外方法,不了解的也可以戳这里

在项目中请求 mock 数据

$(function() {
  $('#btn-get-name').on('click', function() {
	  $.get('/test:name', function(res) {
	  	alert(`Hello ${res.name}!`);
      });
  });
});

启动 addon

puer -a route.js

puer提供了叫插件(addon)的功能,集成了express的route.js来达到最简的路由配置,可以提供基于真实http请求与相应的动态的mock数据。

使用代理模式,应用 puer 到已有的服务器中

开发进行到一定阶段,一般后端服务就逐步进入了,静态页面的开发不再适用。到这个时候,我们可以使用--target path切换到代理模式将puer作为一个代理服务器使用。 比如本地已经存在一个localhost:8888的服务,你要在其上实现自动刷新的功能,请使用-t--target

puer -t http://localhost:8888

前面提到的addon功能是可以和这个模式配合使用puer -t http://localhost:8888 -a route.js

这里只讲了部分常用的功能,更多puer相关的知识请移步到gitHub