这几天基于支持 HTML5 无感认证的ServerLess平台开发了一款博客、门户网站等web平台常用的PV统计工具： page-counter 。主要用到的技术是js+webpack。
回首看来，解决了以下几个比较有意思的问题：
如何设计代码，用统一的方式支持多个ServerLess平台？
如何架构项目，使得其支持CDN和npm两种方式引入？
如何精简源码，源码大小控制在4kb？
如何借助webpack分离生产和测试环境？
源码地址： https://github.com/dongyuanxin/page-counter
npm地址： https://www.npmjs.com/package/page-counter
如果有兴趣的同学，欢迎在阅读完本文后一起接入其他平台的开发； 觉得不错的同学，欢迎给个Star哦 。
如上图所示，bin/backend 目录是暂时没用的。几个比较重要的目录功能说明：
: webpack的配置文件，分别是公共配置、开发模式配置、生产模式配置
index.template.html: 开发模式下配合webpack的 html 模板文件
page-counter.min.js: 打包后的page-counter内容，供CDN引入
page-counter.bomb-1.6.7.min.js：我手动修改并且打包的Bomb平台源码
: gh-pages页面，请看此页面
: gh-pages部署脚本，支持ssh和https协议
: npm的入口文件
: CDN打包入口文件
:
serverless/
config.js
utils.js
中定义了不同平台的类的公共父类。虽然js不支持抽象接口，但是也可以通过抛出错误来实现：
而 leancloud.js 、bomb.js 等不同平台的类都要实现这个接口中的这3个方法。然后通过 统一暴露出去：
这两种设计，既解耦了不同平台的代码，而且还约束了实现规则。如果想接入更多平台，只需要创建新文件，并且暴露一个继承 接口的指定方法的子类即可。
一个成熟的前端小 工具 需要考虑到多种引入方式，目前主流的就是cdn和npm。例如jquery，cdn引入，jq会被自动挂载在window对象上；npm引入，则作用域只在当前文件模块有用。
在考察了多种同类工具后，针对cdn和npm做了不同的处理。
npm
对外暴露 对象，其上有3个方法：
：将当前页面信息发送到云数据库
: 统计 数据库 总记录数（网站总PV），并且将返回结果 自动放入 id为page-counter-total-times的标签里