新的一年，新的气象，好久没有更新过博客了。

在这里祝大家新年快乐，大吉大利。

### 如何反向代理一个站点？

代理，大家都不陌生，大体上分为正向代理和反向代理。常见的有

- 正向代理: (HTTP/Socket5/v2ray/shadowSocket)
- 反向代理: (Nginx/Apache)

本文就讲解，如何制作一个反向代理工具，并且代理任意站点。

市面上已经有那么多代理工具，为什么还要折腾一个？

### 起因

在开发时，我们可能会有这样的一些需求：

1. 如何调试/在线修改站点？（非 SPA）

像 Chrome 浏览器的开发者工具里面就有 override 功能，可以修改服务器返回的资源（HTML/CSS/JS），并映射到本地目录。

但它有一个缺陷：如果修改的站点带有端口，就无法映射到本地，因为 `:` 是一个非法字符，无法在文件系统中创建，或者你可以试试创建一个目录 `localhost:8080`

ref: https://stackoverflow.com/questions/70337046/chrome-local-overrides-with-port-number

2. 调试 微信 等一些对 HTTPS 有要求的平台？

对于一些平台的上线，有要求使用 HTTPS，但你的站点又没有，在开发阶段，可以暂时通过代理的方式解决。

3. 如何调试微信这类的 Web？

不止微信，还有支付宝等内嵌的 H5 页面如何调试？简单的修改和打印信息，根本就不需要发布，通过代理即可解决。

4. 如何向同事或其他人展示不存在的页面？

比如我要给同事展示某网站，需要科学上网，但是他/她却没有，这时候就可以在本机通过代理的方式呈现出来。

就出于以上几点，我觉得，撸一个反向代理工具。

### 技术选型

采用 Golang 进行开发，除了标准库里面支持反向代理之外，还因为它非常简单的交叉编译。

这是[网上](https://h1z3y3.me/posts/simple-and-powerful-reverse-proxy-in-golang/)随便找的代码

```go
import (
    "log"
    "net/http"
    "net/http/httputil"
    "net/url"
)

// NewProxy takes target host and creates a reverse proxy
// NewProxy 拿到 targetHost 后，创建一个反向代理
func NewProxy(targetHost string) (*httputil.ReverseProxy, error) {
    url, err := url.Parse(targetHost)
    if err != nil {
        return nil, err
    }

    return httputil.NewSingleHostReverseProxy(url), nil
}

// ProxyRequestHandler handles the http request using proxy
// ProxyRequestHandler 使用 proxy 处理请求
func ProxyRequestHandler(proxy *httputil.ReverseProxy) func(http.ResponseWriter, *http.Request) {
    return func(w http.ResponseWriter, r *http.Request) {
        proxy.ServeHTTP(w, r)
    }
}

func main() {
    // initialize a reverse proxy and pass the actual backend server url here
    // 初始化反向代理并传入真正后端服务的地址
    proxy, err := NewProxy("http://my-api-server.com")
    if err != nil {
        panic(err)
    }

    // handle all requests to your server using the proxy
    // 使用 proxy 处理所有请求到你的服务
    http.HandleFunc("/", ProxyRequestHandler(proxy))
    log.Fatal(http.ListenAndServe(":8080", nil))
}

```

### 这么简单，这不就完成了吗？

不，事情没有那么简单，如果仅代理接口，那么一般都不会有什么问题，但要代理站点，就有一大堆的问题要处理。

1. HTTP 状态码 301

   301 是永久重定向，如果浏览器收到 301，那么下次再请求这个地址，就不会再次发送请求，这对于一个代理来说，这并不好。

   所以我们需要将 301 改成 302 临时重定向。

2. HTTP header Location

   Location 表示重定向的地址，可以是绝对路径，可以是相对路径。如果我们代理了某个站点，就要重写 Location

   例如代理了 https://github.com

   如果某个请求返回了 Location: https://github.com

   那么我们就需要对其进行修改

   ```diff
   - Location: https://github.com
   + Location: <我的代理地址>
   ```

3. 文件内容替换

   有些站点的资源/链接等直接使用一个完整的 URL 而不是相对路径，例如

   ```html
   <a href="https://github.com">Click</a>
   ```

   那么我们要对其替换

   ```diff
   - <a href="https://github.com">Click</a>
   + <a href="<我的代理地址>">Click</a>
   ```

   这不仅仅是要替换 HTML，还有 CSS/Javascript/XML/JSON 等文件

4. 处理 Content-Encoding

   在替换文件之前，首先是解压，我们接收到的响应，都是经过压缩之后的，那么就无法替换。

   大多数的站点，都会经过压缩后返回。根据[规范](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Encoding)，服务器可能会采用以下几种压缩格式:

   - gzip: 大多数服务器采用的压缩格式
   - compress: 已弃用
   - deflate
   - identity: 无压缩
   - br

   这几类压缩算法都是公开的，并且社区已有现成的库。

   只需要 解压 -> 替换 -> 压缩 -> 返回响应

   甚至可以省略压缩这一步以提高性能。

5. 处理 Cookies

   有些 Cookie 指定了域名，被代理之后域名就不正确，所以我们需要对其进行重写。

   ```diff
   - Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Domain=github.com
   + Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Domain=<我的代理地址>
   ```

   有些 Cookie 指定了 Secure，必须要在 HTTPS 下才可用，但代理服务器如果是 HTTP 的话，也要替换

   ```diff
   - Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure=true
   + Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
   ```

6. 处理 HTML 的 Content-Security-Policy

   [CSP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 是一个安全策略，简单来说，只允许站点信任域名的资源。

   代理之后域名发送变化，如果不替换就无法使用

   ```diff
   - <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://github.com">
   + <meta http-equiv="Content-Security-Policy" content="default-src 'self' <我的代理地址>">
   ```

   以及 HTTP 返回的头部信息

   ```diff
   - Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
   + Content-Security-Policy: default-src 'self' <我的代理地址>; img-src *
   ```

7. 处理 HTML 的 integrity

   integrity 属性用于校验资源的完整性，浏览器在下载资源后再进行 HASH 校验，如果校验不通过，则说明内容已被篡改，浏览器就不会加载。

   ```html
   <link
     crossorigin="anonymous"
     media="all"
     integrity="sha512-MCJFYfbQoT4EXC6aWx5Wghs8FC/jslHEeN2iWXphliccmede2dQlhIBTAUCBq9Yu5poltu4askungzvyCsycGg=="
     rel="stylesheet"
     href="https://github.githubassets.com/assets/tab-size-fix-30224561f6d0a13e045c2e9a5b1e5682.css"
   />
   ```

   这里偷个懒，直接把 integrity 属性移除

   ```diff
   - <link crossorigin="anonymous" media="all" integrity="sha512-MCJFYfbQoT4EXC6aWx5Wghs8FC/jslHEeN2iWXphliccmede2dQlhIBTAUCBq9Yu5poltu4askungzvyCsycGg==" rel="stylesheet" href="https://github.githubassets.com/assets/tab-size-fix-30224561f6d0a13e045c2e9a5b1e5682.css" />
   + <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/tab-size-fix-30224561f6d0a13e045c2e9a5b1e5682.css" />
   ```

8. 处理页面中的其他链接

   在很多网站中，他们引入自家的 CDN，比如百度搜索出来的图片 `https://t8.baidu.com/it/u=2652343384,1723246354&fm=218&app=126&f=JPEG?w=121&h=75&s=182A5D32DCBB7D8A06F8DCC6030070A2`

   显然替换成 `http://t8.<我的代理地址>/xxxxx` 就不对，并且这类请求依赖与 Cookie，否则请求失败。

   要处理这类，我们也要对其进行代理

   代理之后的地址变成 `http://<我的代理地址>/?forward_url=<原地址>`

   处理前:

   ![截屏2022-01-01 20 57 37](https://user-images.githubusercontent.com/9758711/147851082-37514632-11fb-49d4-9c28-a4de1a3a4d09.png)

   处理后:

   ![截屏2022-01-01 20 58 13](https://user-images.githubusercontent.com/9758711/147851090-946b3ae2-462c-4bec-9ce7-4e3f054be058.png)

### 最困难的部分

以上几个处理，大多都是替换 URL，无非就是把目标服务器地址，替换成代理服务器地址，例如代理 Github

github.com -> localhost

这里我想到几种解决方案：

1. 能否直接替换字符串，简单粗暴？

   答: 不行

   否则就会出现这样的情况 `api.github.com` -> `api.localhost`

2. 能否使用正则表达式替换？

   答: 不行

   例如 `/http?s:/\/\/google\.com/` 照样可以匹配 `https://google.com.hk`

   最后变成 `http://localhost.hk`

3. 把内容解析成 AST 再替换节点内容

   这属于高级一点的玩法，替换是最准确的，但同时也是最费时费力，消耗性能的。

   而且一点有语法错误，无法解析的情况，就很难处理（比如总有些站点，写的 HTML 都不符合规范，甚至闭合标签都没有）

4. 最终方案

   最终方案就是提取文本中的 URL，然后比对域名，域名匹配的才替换。

   所以这又回到大难题： **如果从一堆文本中提取 URL?**

   我写了一大串的正则表达式去匹配，但你永远想不到，有些网站的 URL 是长什么样子

   比如有这样的 `https://avatars.githubusercontent.com/u/9758711?s=40&amp;v=4`，有一个特殊字符 `;`

   你很难判定，这是不是一个完整的 URL

   最终也只是做大匹配绝大多数的地址

### 项目地址

最后到这里已经讲完大部分的细节。

经过我的测试，反向代理 Google/Facebook/Github/百度 等几个主流网站都没有问题。更不用说自己开发的站点。

希望能帮助到大家，有 BUG 欢迎反馈，顺便给个小 ✨✨。

https://github.com/axetroy/forward-cli


技术

如何制作一个反向代理服务器以及处理细节

> 前面刚刚说不要瞎折腾这种东西了
> 结果身体却很诚实，又写了一个 vscode 扩展.

在 vscode 中查看热映电影、即将上映的电影和评分前 250 名的电影.

在写代码之余，不妨关注下影讯，放松自己。

我们应该把更多的娱乐(上班滑水)元素带入 `vscode`。不要为资本家 996 了进 ICU。

截图
![Screenshot](https://github.com/axetroy/vscode-movie/raw/master/screenshot-1.png)
![Screenshot](https://github.com/axetroy/vscode-movie/raw/master/screenshot-2.png)

Github: [https://github.com/axetroy/vscode-movie](https://github.com/axetroy/vscode-movie)
安装: [axetroy.vscode-movie](https://marketplace.visualstudio.com/items?itemName=axetroy.vscode-movie)

用VSCODE写代码之余，不妨看看有什么好电影

不要陷入技术魔咒

> 如果你是业内有名的技术大牛，那么可以略过这篇文章

我呢，是很喜欢技术研究，喜欢开源，喜欢写库，写工具。

以前呢，觉得这些东西很炫，做出来很有成就感

但是最近发生了很多事

给了我很多感悟，有感而发，写出来分享一下。

### 技术饭长久不长久？

如果你不是 BAT 内 P7+/T3+ 这个阶梯的技术大神，那么其他都不是关键。

之前不是还有华为 42 岁程序员被裁，顶不住生活压力跳楼了吗。

凡事没有做到行业顶尖的技术，都是不长久的。

你现在厉害，可以加班，每天可以学习为自己充电，跟上时代的步伐。

5 年后呢？10 年后呢？你年薪高了，企业成本高了，家庭有了，琐事多了，每天没有那么多时间为自己充电了。

资本是无情的，年龄的增加，你的不可替代性就越低，越是竞争不过年轻人。

最后也逃不过被裁的命运。

### 那就不打造自己的技术了吗

也不是，但是也有方向，不在对一些`应用场景少`、`难以产生效益`、`无法应用到实际项目`、`瞎折腾`的技术进行钻研。

比如有这么一个库，实现了某个功能。

你知道这个库的实现有点毛病，效率不够高，除非有必要，否则没有必要重写一个。

应该写一些业务型的库，而不是写一些极致的库

### 技术好坏论

这里不是说哪个技术是好的，哪个技术是坏的。

而是区分 **PHP 是世界上最好的语言**这类的命题。

`C/C++` 性能比 `Java` 好，`Go` 写法优雅，简单易用，`Python` 速度慢, `Javascript` 坑多..., `PHP` 写法丑陋

如果这类的问题，你还 care 的话，那么说明你还是头发多啊。

这些语言不过是你拿着饭碗的工具，**工具不分好快，能产生效益的工具，才是好的工具**

例如大公司，喜欢用 C/Java/Go 这类的语言, 因为他们不缺发给程序员的钱，他们需要稳定高效的业务

而小公司，为什么青睐于 PHP，因为他们需要快速产出，又好招人，同时不太高的人力成本。

所以瞎 JB 争论哪个语言好是没有意义的

### 技术的出路在哪里？

继续深研是没有出路的，程序员应该增加其他工作以外的收入，否则当裁员降临到自己头上时，就会措手不及，家里上有老，下有小，那么多张嘴，还有房贷，车贷，唯一的收入突然断裂，很容易导致一个人崩溃。

被裁员了，另外找工作，薪资太高，别人不要，降薪又不够开支，怎么办？

所以，增加工作以外的收入，是为了增加安全感。

那么就程序员而言，有哪些途径可以增加额外收入:

1. 外包项目

接一些外包项目，没有人脉的话，你可能接到的只是 2 包，甚至 3 包，不过不要紧，人脉慢慢积累

2. 黑科技

如果你有这方面的能力，写了个黑科技的东西，自然有人来找你，曾经有人找过我，至于什么项目我就不说了。后面我还是觉得技术不成熟，没有谈下去。

3. 卖系统卖定制服务

类似于卖客服系统，聊天系统，工单管理系统

4. 淘宝店

平时多写一些模版，或者收集一些模版，改一改，挂到淘宝店。

例如企业站，商场，小程序之类的

5. 薅羊毛

利用自己的技术优势薅羊毛, 自动化地刷单，刷广告，宣传等

6. 知识变现

付费的知识问答，视频教程和课程等

以上这些纯属胡说八道，我没做过，正在努力 💪

### 最后

写这篇文章下来，只是为了提醒自己，也于君共勉


感想

不要陷入技术魔咒

大多数时候, 写的一个小小的库，还得要专门写变更日志。

而遵循一定的 commit 格式，是可以生成标准的变更日志的。

这时候就需要像[conventional-changelog](https://github.com/conventional-changelog/conventional-changelog)

这我就不得不在我的项目中添加脚本

```bash
npx conventional-changelog-cli -p angular -i CHANGELOG.md -s -r 0
```

今天呢，就把它提取出来，独立成为一个 vscode 扩展

让你方便的生成 CHANGELOG

### 支持哪些特性

- 从头开始生成更改日志。
- 从最近 1 个版本生成更改日志。
- 从最近 2 个版本生成更改日志。
- 从最近的 N 版本生成更改日志。
- 自动生成`CHANGELOG.md`。
- 将此版本更改附加到`CHANGELOG.md`。

![Screenshot](https://github.com/axetroy/vscode-changelog-generator/raw/master/screenshot.gif)

### TODO

- 完整迁移`conventional-changelog-cli`的参数设置
- 适配多个项目集合，类似`lerna`
- 在文件管理器添加`生成更新日志`菜单

### 说说踩的坑

`conventional-changelog`的包分有

- conventional-changelog-cli
- conventional-changelog
- conventional-changelog-core

按理来说，代码更次的，应该引用`conventional-changelog-core`或`conventional-changelog`

然而，这两个包都有问题: **不能指定当前工作目录去解析** (其实它引用的`git-raw-commits`是有参数设置的`conventional-changelog`并没有用这个参数)

我又不想 Fork 一个自己改, 那就只能用 `conventional-changelog-cli`, 以命令行的方式去运行。

#### 那么问题来了：

1. vscode 的扩展安装不是通过`npm install`的

vscode 直接把本地的`node_modules`依赖打包，并且忽略了一些目录和文件，包括`.bin`目录

所以扩展是找不到`conventional-changelog-cli`的可执行文件

2. 平台不同，可执行文件也不同

Linux 和 OSX 下 是一个 link，自己执行 `chmod +x` 即可，而 windows 下是 exe 文件。

所以自制可执行文件不靠谱

#### 解决办法:

1. 我不要可执行文件了，直接用 node 执行 js 文件可不可以

```bash
node ./node_modules/conventional-changelog-cli/cli.js
```

可以是可以，不过这样的扩展就有局限行，需要用户安装`nodejs`，显然不是每个用户都安装

2. 使用 Electron 内置的 NodeJS 执行

Electron 内置有的 NodeJS，我们就用它来执行这个 js 文件

`process.execPath`则是当前运行环境的可执行文件路径

```javascript
execa(process.execPath, './node_modules/conventional-changelog-cli/cli.js');
```

最后完美解决

最后上项目: [https://github.com/axetroy/vscode-changelog-generator](https://github.com/axetroy/vscode-changelog-generator)

有什么意见或者功能需求，欢迎发issue给我!


又一个vscode扩展，生成CHANGELOG

每次需要使用忽略 `eslint`/`tslint` 错误的时候，老是记不住，基本都要翻文档，很烦。

所以干脆写那么一个扩展，来帮助我自动补全，岂不美哉!

![ts](https://github.com/axetroy/vscode-comment-autocomplete/raw/master/screenshot.gif)

既然这样了，索性做做成一个通用的，集成比如 `prettier/webpack/jshint/TODO/FIXME`等类似的自动补全。

目前支持语言有:

- [x] Javascript/Typescript
- [ ] Vue
- [x] css/sass/less/scss
- [x] HTML/markdown
- [ ] JSON/yml/yaml

后续会支持更多语言和工具。

如果有什么建议，欢迎反馈!

最后上地址: [https://github.com/axetroy/vscode-comment-autocomplete](https://github.com/axetroy/vscode-comment-autocomplete)


老是记不住 eslint-disable-next-line 怎么办? 于是我写了个自动补全的扩展

> 重新编辑，重发

最近沉迷 vscode 扩展无法自拔，开启写了新坑，也维护旧扩展。

其中就有这么一个[扩展](https://github.com/axetroy/vscode-npm-import-package-version)是这样的: 显示导入的包版本号。

![Screen shot](https://raw.githubusercontent.com/axetroy/vscode-npm-import-package-version/master/screenshot/vue.png)

代码很简单也很少，用`Babel/Typescript/vue-component`分别解析对应的文件，然后标注版本号。

然而就是这么功能简单的扩展，启动速度居然超过其他所有稍微复杂一点的扩展。

![](https://i.loli.net/2019/03/05/5c7d63269f13f.jpg)

![2019-03-05 02 20 51](https://user-images.githubusercontent.com/9758711/53754049-b668bf00-3eed-11e9-9334-6f380cc4f062.png)

启动速度 `2431ms`

![](https://i.loli.net/2019/03/05/5c7d62237d0d2.jpg)

这不科学呀, 到底是慢在哪里呢?

分析了一下 `profile` 文件后，发现不是我写的代码慢，而是慢在了加载的第三方库

### Typescript 的通病

Typescript 跟随 ECMA 标准，import 必须放在顶部.

```typescript
import * as ts from 'typescript';

export function parser() {
  // 这里是你的业务逻辑
  ts.parser();
}
```

问题就在于这. `typescript`在编译成`javascript`之后

```ts
const ts = require("typescript")

export.parser = function parser() {
  // 这里是你的业务逻辑
  ts.parser()
}
```

我们都知道**require 函数加载模块都是同步进行的**, 也就是我还没使用`parser`函数的时候，就加载这个模块了。

而第三方模块加载，根据不同的包，加载时间各不相同。因为有些包，会在加载的时候做一些同步的初始化操作

```ts
// 某第三方包

// 这里做一些同步操作
// 例如定义map，for循环之类的

// 导出函数
export default function() {}
```

而恰巧，Typescript 和 Babel/Babel-types 都有大量的这种操作, 导致拖慢了扩展初始化速度.

### 解决方案

问: 能不能在我使用这个函数的时候，才导入相应的包?
答: require 就可以

```diff
- import * as ts from 'typescript';

export function parser() {
  // 这里是你的业务逻辑
+ const ts = require('typescript');
  ts.parser();
}
```

问题就来了，`require` 的模块是没有类型。那使用`typescript`开发的体验就不是很好了.

我们稍微改造一下

```diff
- import * as ts from 'typescript';
+ import TS = require('typescript'); // 这里只是导入类型而已

export function parser() {
  // 这里是你的业务逻辑
+ const ts:typeof TS = require('typescript'); // 给require的模块附上类型
  ts.parser();
}
```

OK! 大功告成，就这么简单。

### 结果对比

在我把这个简单的扩展按照上面的方式重构一遍之后，来看一下启动速度

![2019-03-05 02 21 57](https://user-images.githubusercontent.com/9758711/53754059-c6809e80-3eed-11e9-8a86-6cba7c459c01.png)

更改后启动速度竟然仅用了`31ms`, 比之前快了 80 倍

![](https://i.loli.net/2019/03/05/5c7d6807d2fcc.jpg)

**最后愿天下没有拖慢速度的扩展，宇宙第一编辑器已经够慢了**


我是如何把vscode扩展的启动速度提升80倍的

在工作中，部署前端应用，基本上大家都认同通过 Docker 来部署是最佳实践.

至于为什么，大家可以通过搜索相关的文章.

那么今天就来讲一讲我遇到过哪些痛点以及如何解决的：

### 部署繁琐

基本上工作流都是这样:

```bash
# 本地
docker build xxx
docker push xxx

# 服务器
docker pull xxx
docker run xxx # 或者 docker-compose up
```

这样的工作流在`本地`与`远程服务器`之前切换. 浪费了很多时间，影响效率

### 与前端工作流不太匹配

比较正规的流程，部署是要`git tag`的.

而前端还需要更改`package.json`的版本号

这样的事`npm version xxx`包办了

接下来我们模拟一次补丁修复，发布版本并且部署在服务器

```bash
# 升级版本号
$ npm version patch # 假设版本1.0.1
# 构建应用
$ npm run build
# 打包镜像
$ docker build <镜像名>:1.0.1
# 推送镜像到托管服务器
$ docker push <镜像名>:1.0.1

# 连接到远程服务器
$ ssh root@192.168.0.1 -p 2022
# 进入到项目目录
$ cd /www
# 修改`docker-compose.yml`中的版本号
# 更改 <镜像名>:<旧版本号> ---> <镜像名>:1.0.1
$ vi docker-compose.yml
# 拉取新的镜像
$ docker pull <镜像名>:1.0.1
# 开启服务
$ docker-compose down && docker-compose up -d
```

发现问题了吗，是不是非常繁琐.

作为一枚程序猿，这样的操作是无法忍受的.

**就不能打包镜像之后，自动部署到指定的服务器吗?**

于是我写了这么一个工具

## dockposer

> 一个基于 docker-compose, 简化部署流程的命令行工具

还是上面那个场景, 我们用 `dockposer` 来操作一遍

```bash
$ npm version patch # 假设版本1.0.1
$ npm run build
$ dockposer build <镜像名>:{NPM_PACKAGE_VERSION}
$ dockposer push <镜像名>:{NPM_PACKAGE_VERSION}
$ dockposer deploy <镜像名>:{NPM_PACKAGE_VERSION}
```

> {NPM_PACKAGE_VERSION} 是一个变量，当运行命令时，自动替换成 `package.json`的版本号
> 这样我们不用显示的指定构建某个版本, 遵循 NPM 版本即可

或者添加到NPM脚本中

```diff
{
  ...
  "scripts": {
    ...
+   "build": "dockposer build your_tag_name:{NPM_PACKAGE_VERSION}",
+   "push": "dockposer push your_tag_name:{NPM_PACKAGE_VERSION}",
+   "deploy": "dockposer deploy your_tag_name:{NPM_PACKAGE_VERSION}"
  }
}
```

```
npm run build
npm run push
npm run deploy
```

完了，就这么得简单.

我们来分析下，它到底做了什么?

1. dockposer build <tag>

与 `Docker build` 类似, 根据 `Dockerfile` 构建本地镜像

2. dockposer push <tag>

与 `Docker push` 类似, 把本地镜像推送到托管服务器

3. dockposer deploy <tag>

把本地镜像，部署到指定的服务器。

这时候我们需要一个配置文件，不然工具怎么知道部署到哪里

配置文件默认为 `dockercomposer.host.json`, 格式如下

```json
{
  "name": "测试服",
  "path": "/www",
  "host": "192.168.0.1",
  "port": 22,
  "username": "root",
  "password": "root"
}
```

那么它是怎么工作的呢? 总共就一下几个步骤:

1. 从 `dockposer.host.json`中读取服务器配置
2. 使用 ssh 协议连接到远程服务器
3. 在远程服务器中运行命令 docker pull <镜像名>:<版本号>
4. cd 到 `host.path` 并打开 `docker-compose.yaml`，将 `<镜像名>:<旧版本号>`更新为 `<镜像名>:<新版本号>`
5. 在远程服务器中运行命令`docker-compose down && docker-compose up -d`以重新启动。

这样就做到了不需要切换到服务器环境，也能够部署在服务端

## Q & A

Q: 自动化部署工具这么多，你为什么不用，偏要自己造?

> A: 我知道的几个自动化部署工具都需要在服务端也安装它们的工具. 而我这个命令行不用

Q: 为什么不支持部署到多个服务器?

> A: 云服务商都提供了集群部署. 不要自己瞎折腾. 起初写这个只是为了我方便部署到测试服

Q: 部署不应该集成到 CI 吗? 谁会这样手动部署?

> A: 小团队小项目折腾不起. 考虑下人员配置，不是每个人都玩得溜. 在人员少，能力都不是特别强的情况下，加上各种行业标配反而是一种累赘

Q: 我的场景跟你差不多，也用 Docker 部署，没有集群，我能运用到生成环境吗?

> A: 目前来讲，依旧不建议，我也只是运用到测试服务, 一个是还没稳定，第二是万一有点什么事，手动部署还可以补救

Q: 还有哪些不尽人意的地方?

> 主要是部署这一块，现在只是单纯的更改服务端的 `docker-compose.yml` 文件然后运行. 更复杂的是，项目的一个配置文件要不要也一起更新？比如 nginx+node 的模式, nginx 的配置文件更新不更新? 还要根据不同的环境，更新不同的配置文件. 太复杂，不符合我的初衷

项目地址: [https://github.com/axetroy/dockposer](https://github.com/axetroy/dockposer)

end!

开发基于Docker封装的一个快速部署工具

开发中，不可能每一个功能都自己亲力亲为。

在这个遍地第三方服务的时代，运用好第三方服务，能够极大的提升应用的健壮性。

接下来记录下在应用中使用的哪些第三方服务:

### eoLinker

> eoLinker ™ 平台为您API的生产、运维及质量保障提供了强大且完善的体验网络，以满足您企业产品高速迭代和不断变化的需求。

方便管理/统一RESFUL接口文档。

第三方服务提供的好处就是随时提供的外网访问，可追溯的变更记录，以及便捷的测试环境。

当然，也有很多开源的文档生成工具，通过解析代码注释生成文档，代码=文档。

总体来说，开源工具生成的文档也只是 “能看” ，并不能那么得好用。

况且 eoLinker 是免费服务

**后端用GraphQL的可以忽略**

### bugsnag

bugsnag 是一个免费的错误上报平台，免费版已经能满足绝大多数的需求了。

目前已应用到多个项目，真香

### alinode

alinode是阿里云提供的免费Node性能监控平台，发现内存泄漏，性能监控，性能预警，发现慢请求等等功能。

也是我在我司推广而出，也已部署到多个应用

### 阿里云容器服务

项目部署极力推荐使用Docker部署，安全，可复用，少掉头发

而Docker官方仓库只支持一个私有镜像，阿里云容器服务提供无限的私有镜像

而且国内镜像比官方镜像速度要快

集合第三方平台提高应用的健壮性

#### 前言:

> 没有什么是非得用 xx 技术才行的，只是 **能用** 和 **好用** 的区别
> 有些习惯了老旧的工作方式，不愿去学习，不愿意去改变，追求 “能用就行”
> 有些不单追求能用，还有提升的空间，追去好用
> It's up to you!

### 为什么需要 Docker?

在上一家公司，操作系统是自由的，你想用 Windows/Linux/Mac, 只要你用的习惯，能够高效率工作，无所谓什么系统。

然而问题就来了，大家的环境不一样。Unix 系系统基本无太大差别，Windows 就不一样了。

环境的差异会导致踩很多很多坑, 印象比较深刻的就是 sass 编译，在哪个还需要依赖 ruby 的年代，安装 gem 是不顺畅的，windows 格式编码格式不是 utf-8, 导致 sass 文件中有中文编译报错等等。

还有一些诸如文件监听，在 Windows 下需要 fallback，靠轮循监听变化。

在经过一系列的折腾之后，我们就尝试使用 Docker 来解决开发环境统一的问题。

构建一个通用的 Linux 镜像，里面包含了前端开发的基本环境，包括 python，nodejs 等等... 前端只要给定源码文件就行了。就这样暂时统一了开发环境，虽然最后我们统一使用 Unix 系统。

### Docker 还有哪些场景

**前后端不分离的项目**

你作为一个前端，你是如何与 PHP 后端参与开发的？你需要搭建 PHP 环境吗？

> 我不搭建 PHP 开发环境，FTP 直接上传，就是这么简单粗暴，Docker 什么的，能吃吗 ∂？

如果你是这种开发模式，不是说 low，而是说效率低下。每次修改都要上传，盲人改代码。

所以你需要 Docker，配置好环境，一键启动，一键关闭，各开发人员相互独立，代码通过 git 同步，指向同一个数据库，修改代码立即见效，`F*CK FTP`

**单页面应用**

前后端分离的情况下，单页面渲染一般使用`nginx`, Docker 同样配置 nginx，做静态页渲染和去除难看的`#`号(通过 404 重定向只 index.html, 把 404 的控制权，交还给前端)

这样你的路由`http://example.com/#/home`变成了`http://example.com/home`

甚至你可以作反向代理，消除跨域

`http://example.com/api` > `http://api.server.com`

**服务端渲染**

那么你更需要 Docker, 因为你需要 Node 环境，你需要负载均衡，你需要反向代理等等...

**Node 后端**

既然是后端，数据库你要吧？nginx 你要吧，Node 你要安装吧？

A 同事项目依赖了 postgres@9.6, 结果你项目依赖 postgres@10.1. 难道你叫他卸载了重新装一个?

### 如何应用 Docker

首先你得安装`Docker` 和 `Docker Compose`, 使用 `Docker Compose`来配置镜像.

#### 配置最简单的 Node 环境

一个简单的项目结构如下

```
├── docker-compose.yml
└── index.js
```

```javascript
// index.js
const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('X-Foo', 'bar');
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('ok');
});

server.listen(3000);
```

```yml
# docker-compose.yml

version: "3"
services:
  web:
    image: node:8-alpine
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./:/home/node/app # 将本地目录映射到容器内
    command: ["node", "index.js"] # 运行命令
    ports:
      - 3000:3000 # 本地端口:容器端口
```

运行命令启动

```bash
$ docker-compose up
Starting example_web_1 ... done
Attaching to example_web_1
```

现在 NodeJs 应用已经跑起来了，试着访问 `http://localhost:3000`

#### Node 的依赖包怎么办?

现在我们给项目添加依赖`Koa`，用 Koa 来搭建服务器.

这我们需要把`node_modules`和`package.json`打包进镜像

而官方的 node 镜像`node:8-alpine`是不安装依赖的，需要我们自定义一个镜像

创建一个 `Dockerfile`

```dockerfile
# Dockerfile
FROM node:8-alpine

# 设置工作目录
WORKDIR /home/node/app

# 把package.json复制进镜像中
COPY ./package.json /home/node/app/package.json

# 在镜像中安装依赖
RUN yarn --production
```

修改 `docker-compose.yml`

```yml
# docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: ./Dockerfile
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./index.js:/home/node/app/index.js # 将本地目录映射到容器内
    command: ["node", "index.js"] # 运行命令
    ports:
      - 3000:3000 # 本地端口:容器端口
```

此时项目目录

```
├── Dockerfile
├── docker-compose.yml
├── index.js
├── package.json
└── yarn.lock
```

运行命令

```bash
$ docker-compose up
Building web
Step 1/5 : FROM node:8-alpine
 ---> 86b71ddd55fa
Step 2/5 : WORKDIR /home/node/app
 ---> Using cache
 ---> 2347fe6d8f3c
Step 3/5 : COPY ./package.json /home/node/app/package.json
 ---> Using cache
 ---> 1e0026f493f5
Step 4/5 : RUN yarn --production
 ---> Using cache
 ---> 549284f78c1c
Step 5/5 : RUN ls ./node_modules
 ---> Using cache
 ---> 350adf90cfa8
Successfully built 350adf90cfa8
Successfully tagged example_web:latest
Recreating example_web_1 ... done
Attaching to example_web_1
```

服务已运行起来了，访问 3000 试试看吧

#### 如何用 Nginx 反向代理，消除跨域问题

首先得有一个 nginx.conf 配置

```conf
# nginx.conf
user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
	worker_connections 1024;
}


http {

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	log_format main '$remote_addr - $remote_user [$time_local] "$request" '
	'$status $body_bytes_sent "$http_referer" '
	'"$http_user_agent" "$http_x_forwarded_for"';

	access_log /var/log/nginx/access.log main;

	sendfile on;
	tcp_nopush on;

	gzip on;

	# 定义上游服务器
	upstream api {

		ip_hash;

                # 这里服务器使用 koaserver
                # 其实原理是Docker改写了host, koaserver指向nodejs那个容器的IP
		server koaserver:3000 weight=1;

		keepalive 300;
	}

	server {

		listen 80;
		server_name localhost;

		charset utf-8;

		root   /usr/share/nginx/html;

		# 代理以 api 为前缀的请求
		location ~^/api {
			proxy_pass http://api;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
		}

		error_page 500 502 503 504 /50x.html;

		location = /50x.html {
			root /usr/share/nginx/html;
		}
	}

}
```

```yml
version: "3"
services:
  nginx_proxy:
    image: nginx:1.13.8-alpine
    restart: always
    working_dir: /home/static
    volumes:
       - ./index.html:/usr/share/nginx/html/index.html
       - ./nginx.conf:/etc/nginx/nginx.conf # 映射 ginx 配置文件
    ports:
      - 3000:80 # 绑定容器的80端口到本的1080端口
    links:
      - web:koaserver # 给它取个别名，叫做 koaserver
  web:
    build:
      context: .
      dockerfile: ./Dockerfile
    user: node
    working_dir: /home/node/app
    environment:
      - PORT=3000
    volumes:
      - ./index.js:/home/node/app/index.js # 将本地目录映射到容器内
    command: ["node", "index.js"] # 运行命令
```

```html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  hello html
</body>
</html>
```

此时项目目录

```
├── Dockerfile
├── docker-compose.yml
├── index.html
├── index.js
├── nginx.conf
├── package.json
└── yarn.lock
```

运行命令

```bash
$ docker-compose up
Creating network "example_default" with the default driver
Pulling nginx_proxy (nginx:1.13.8-alpine)...
1.13.8-alpine: Pulling from library/nginx
550fe1bea624: Already exists
d421ba34525b: Already exists
fdcbcb327323: Already exists
bfbcec2fc4d5: Already exists
Digest: sha256:c8ff0187cc75e1f5002c7ca9841cb191d33c4080f38140b9d6f07902ababbe66
Status: Downloaded newer image for nginx:1.13.8-alpine
Creating example_web_1 ... done
Creating example_nginx_proxy_1 ... done
Attaching to example_web_1, example_nginx_proxy_1
```

访问 `localhost:3000`， 返回 `hello html`
访问 `localhost:3000/api`， 返回 `hello koa`

解决了跨域，但同时也存在问题，代理之后，应用程序无法获取 IP，需要从 header 的`X-Real-IP`
字段获取

### 最佳部署姿势是怎么样的?

其他还有很多案例需要使用 Docker，特别是开发后端的应用。后端应用依赖 数据库(MySQL, Postgres, Redis...)、服务器(Nginx/Apache)，开发语言(如 PHP)。

如果我是一名开发者，接手别人的项目，项目需要安装 PHP, 需要安装 MySQL, Apache, redis, mongo... 最好能提供一个`docker-compose.yml`，否则我不保证我打不死你

回到 Node 部署，最佳的姿势：

**把编译过后的代码(例如 Typescript>JS)+依赖+配置打包进镜像**

然后 push 镜像，最后在服务端部署。其余的配置，尽量都通过`docker-compose.yml`的环境变量去设置

**做到只需要一个配置文件，就能把完整的项目搭建起来**

## 总结

Docker 到底解决了我们哪些问题？

- [x] 容器化作隔离.。无论你怎么作，都是和宿主环境隔离的
- [x] 统一环境。不会再出现 "为什么我的电脑上就可以，在你的电脑上就不行" 的玄学 BUG
- [x] 易部署。一键安装是种怎样的体验？
- [x] 集群分布式解决方案。前端页面仔需要知道这个？


使用 Docker 打造超溜的前端环境

在使用 JWT 的时候，有没有想过，为什么我们需要 JWT？以及它的工作原理是什么?

我们就来对比，传统的 session 和 JWT 的区别

我们以一个用户，获取用户资料的例子

### 传统的 session 流程

1.  浏览器发起请求登陆
2.  服务端验证身份，生成**身份验证信息**，存储在服务端，并且告诉浏览器写入 Cookie
3.  浏览器发起请求获取用户资料，此时 Cookie 内容也跟随这发送到服务器
4.  服务器发现 Cookie 中有身份信息，验明正身
5.  服务器返回该用户的用户资料

### JWT 流程

1.  浏览器发起请求登陆
2.  服务端验证身份，根据算法，将用户标识符打包生成 token, 并且返回给浏览器
3.  浏览器发起请求获取用户资料，把刚刚拿到的 token 一起发送给服务器
4.  服务器发现数据中有 token，验明正身
5.  服务器返回该用户的用户资料

你发现了吗？好些并没有什么区别，除了 session 需要服务端存储一份，而 JWT 不需要

但实际上区别大了去了

1.  session 存储在服务端占用服务器资源，而 JWT 存储在客户端
2.  session 存储在 Cookie 中，存在**伪造跨站请求伪造攻击**的风险
3.  session 只存在一台服务器上，那么下次请求就必须请求这台服务器，不利于分布式应用
4.  存储在客户端的 JWT 比存储在服务端的 session 更具有扩展性
5.  ...

对比完了 session 和 JWT 的区别，下面我们来看看那它的实现原理

### JWT 工作原理

![jwt](https://cdn.auth0.com/content/jwt/jwt-diagram.png)

首先 JWT 长这个样

```
eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpcCI6IjEyNy4wLjAuMSIsInV1aWQiOiJmZjEyMTJmNS1kOGQxLTQ0OTYtYmY0MS1kMmRkYTczZGUxOWEiLCJpYXQiOjE1Mjc1MjMwMTd9.1C01cpOf1N3M9YAYvQjfcLbDGHZ4iPVncCGIoG-lpO0jHOIA_ZHtSMDvK1nzArLpGK5syQSwExsZJz2FJsd2W2TUiHQYtzmQTU8OBXX6mfSZRlkts675W5_WhIiOEwz69GFSD0AKXZifCRgIpKLC0n273MRMr0wJnuBi9ScfJ7YjSiqCr7qyQ5iXeOdS3ObT3wdjjk-Wu9wbWM7R25TFb-7PEZY7r_e8jmczPCVcNbOYegedu73T4d30kRn2jKufTGntD5hR6T9AQsgAMwVR1edEFflWb772TmrHI7WZOAivsBCN9sr4YiyYMvE8lcz_mBsgsunugGiHA3DGxB2ORbjIC8NPm8FI25zGOh9JIM2r_jFFTIm9GiuKtC8Ck8N3-eWi9u1NgBxwLdgN5JyCORnIOlciQEsScg-3SdCTM5LH_j6CeqQNwJxT4-oENzqLSTDJbP-SOj9nnx8HnJ5wh3n64rAvtc89CeTk7PhWFjksHDifngN-cnaszl5lqoF1enz5i9FYYELSjM-G7jns2SyY1MQeLRjuEDriPZtFaGmTW-RLH3gJfQXtbdpEo0_nHBqXEohwoN_FLKo4BNrEwshpyA7vkBpCQC0QALKyC1_L1Q5qduR6dDcqRozAo2VqJXmAKN0rvhLuIEHZkicOZY0Ds4So4GCcleqvFcxm1HQ
```

眼睛看仔细一些，你会发现 JWT 里面有两个`.`

数据格式是这样的 `header.payload.signature`

我们逐个逐个部分去分析，这个部分到底是干嘛的，有什么用

#### Header

JWT 的 header 中承载了两部分信息

```json
{
  "alg": "RS256",
  "typ": "JWT"
}
```

* **alg**: 声明加密的算法
* **typ**: 声明类型

对这个头部信息进行 base64，即可得到 header 部分

```js
const headerBuff = Buffer.from(
  JSON.stringify({
    alg: "RS256",
    typ: "JWT"
  })
);

const header = headerBuff.toString("base64");

console.log(header);
// eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9
```

#### Payload

payload 是主体部分，意为载体，承载着有效的 JWT 数据包，它包含三个部分

* 标准声明
* 公共声明
* 私有声明

**标准声明的字段**

```typescript
interface Stantar {
  iss?: string; // JWT的签发者
  sub?: string; // JWT所面向的用户
  aud?: string; // 接收JWT的一方
  exp?: number; // JWT的过期时间
  nbf?: number; // 在xxx日期之间，该JWT都是可用的
  iat?: number; // 该JWT签发的时间
  jti?: number; //JWT的唯一身份标识
}
```

标准中建议使用这些字段，但不强制。

**公共声明的字段**

```typescript
interface Public {
  [key: string]: any;
}
```

公共声明字段可以添加任意信息，但是因为可以被解密出来，所以不要存放敏感信息。

**私有声明的字段**

```typescript
interface Private {
  [key: string]: any;
}
```

私有声明是 JWT 提供者添加的字段，一样可以被解密，所以也不能存放敏感信息。

上面的 JWT 的 payload 结构是这样的

```json
{
  "ip": "127.0.0.1",
  "uuid": "ff1212f5-d8d1-4496-bf41-d2dda73de19a",
  "iat": 1527523017
}
```

同样是通过 base64 加密生成第二部分的 payload

```js
const payloadBuffer = Buffer.from(
  JSON.stringify({
    ip: "127.0.0.1",
    uuid: "ff1212f5-d8d1-4496-bf41-d2dda73de19a",
    iat: 1527523017
  })
);

const payload = payloadBuffer.toString("base64");

console.log(payload);
// eyJpcCI6IjEyNy4wLjAuMSIsInV1aWQiOiJmZjEyMTJmNS1kOGQxLTQ0OTYtYmY0MS1kMmRkYTczZGUxOWEiLCJpYXQiOjE1Mjc1MjMwMTd9
```

#### Signature

signature 是签证信息，该签证信息是通过`header`和`payload`，加上`secret`，通过算法加密生成。

公式 `signature = 加密算法(header + "." + payload, 密钥);`

上面的 header 中，我们已经定义了加密算法使用 `RS256`，也已经实现了生成`header`和`payload`，下面我们来生成 signature

```js
const crypto = require("crypto");
const sign = crypto.createSign("SHA256");
const secret = `私钥，太长我就不贴出来了`;

sign.write(header + "." + payload);
sign.end();

const signature = sign
  .sign(secret, "base64")
  // 在JWT库中，已经把这些字符过滤掉了
  .replace(/=/g, "")
  .replace(/\+/g, "-")
  .replace(/\//g, "_");

console.log(signature);
```

到此，已经实现了如何生成一个 JWT 的 token.

### 它是如何做身份验证的？

首先，JWT 的 Token 相当是明文，是可以解密的，任何存在 payload 的东西，都没有秘密可言，所以隐私数据不能签发 token。

而服务端，拿到 token 后解密，即可知道用户信息，例如本例中的`uuid`

有了 `uuid`，那么你就知道这个用户是谁，是否有权限进行下一步的操作。

### Token 的过期时间怎么确定？

payload 中有个标准字段 `exp`，明确表示了这个 token 的过期时间.

服务端可以拿这个时间与服务器时间作对比，过期则拒绝访问。

### 如何防止 Token 被串改？

此时 `signature`字段就是关键了，能被解密出明文的，只有`header`和`payload`

假如黑客/中间人串改了`payload`，那么服务器可以通过`signature`去验证是否被篡改过。

在服务端在执行一次 `signature = 加密算法(header + "." + payload, 密钥);`, 然后对比 signature 是否一致，如果一致则说明没有被篡改。

所以为什么说服务器的密钥不能被泄漏。

如果泄漏，将存在以下风险:

* 客户端可以自行签发 token
* 黑客/中间人可以肆意篡改 token

## 安全性相关

如果加强 JWT 的安全性？

根据我的使用，总结以下几点：

1.  缩短 token 有效时间
2.  使用安全系数高的加密算法
3.  token 不要放在 Cookie 中，有 CSRF 风险
4.  使用 HTTPS 加密协议
5.  对标准字段 iss、sub、aud、nbf、exp 进行校验
6.  使用成熟的开源库，不要手贱造轮子
7.  特殊场景下可以把用户的 UA、IP 放进 payload 进行校验(不推荐)

## 参考文献

[RFC 7519](https://tools.ietf.org/html/rfc7519)

> 以上纯属个人愚见，大神笑笑就好. 本来JWT已经是烂大街的东西，奈何还是有些所谓的架构师在不了解的情况下zxc/.,$87^%aslkvnzc

一篇文章告诉你JWT的实现原理

趁着博客刚刚支持 ``jsfiddle``， 赶紧写一些demo

## 垂直水平居中

### 通过 line-height 设置单行居中

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/0tebhtkg/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 通过 Tabel 表格元素居中

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/4qs4pvr2/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 通过 Flex 布局居中

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/0bhypr6y/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 圣杯布局

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/dmkkv0wy/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 侧边栏跟随

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/bhonuo07/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 返回顶部

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/m0s5g7ex/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 铆接点跳转

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/evwk0uhm/embedded/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 头部悬浮

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/dvv60m3L/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 聊天气泡

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/8fb55rqs/embedded/html,css,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

## 简单的验证码输入

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/j2tkgeoh/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

## 简单的iOS的切换按钮

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/kvmdao9n/3/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/86j90o43/1/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

## 侧边栏滑动

<iframe width="100%" height="300" src="//jsfiddle.net/axetroy/g36nzvpq/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

前端常见的布局和功能 (持续更新)

> 最近在研究 AST, 之前有一篇文章 [面试官: 你了解过 Babel 吗？写过 Babel 插件吗? 答: 没有。卒](http://axetroy.xyz/#/post/170)
> 为什么要去了解它? 因为懂得 AST 真的可以为所欲为

简单点说，使用 Javascript 运行Javascript代码。

这篇文章来告诉你，如何写一个最简单的解析器。

## 前言(如果你很清楚如何执行自定义 js 代码，请跳过)

在大家的认知中，有几种执行自定义脚本的方法？我们来列举一下：

### Web

#### 创建 script 脚本，并插入文档流

```javascript
function runJavascriptCode(code) {
  const script = document.createElement("script");
  script.innerText = code;
  document.body.appendChild(script);
}

runJavascriptCode("alert('hello world')");
```

#### eval

无数人都在说，不要使用`eval`，虽然它可以执行自定义脚本

```javascript
eval("alert('hello world')");
```

参考链接: [Why is using the JavaScript eval function a bad idea?](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea)

#### setTimeout

setTimeout 同样能执行，不过会把相关的操作，推到下一个事件循环中执行

```javascript
setTimeout("console.log('hello world')");
console.log("I should run first");

// 输出
// I should run first
// hello world'
```

#### new Function

```javascript
new Function("alert('hello world')")();
```

参考链接: [Are eval() and new Function() the same thing?](https://stackoverflow.com/questions/4599857/are-eval-and-new-function-the-same-thing)

### NodeJs

#### require

可以把 Javascript 代码写进一个 Js 文件，然后在其他文件 require 它，达到执行的效果。

NodeJs 会缓存模块，如果你执行 N 个这样的文件，可能会消耗很多内存. 需要执行完毕后，手动清除缓存。

#### Vm

```javascript
const vm = require("vm");

const sandbox = {
  animal: "cat",
  count: 2
};

vm.runInNewContext('count += 1; name = "kitty"', sandbox);
```

以上方式，除了 Node 能优雅的执行以外，其他都不行，API 都需要依赖宿主环境。

## 解释器用途

在能任何执行 Javascript 的代码的平台，执行自定义代码。

比如小程序，屏蔽了以上执行自定义代码的途径

那就真的不能执行自定义代码了吗？

非也

### 工作原理

基于 AST(抽象语法树)，找到对应的对象/方法, 然后执行对应的表达式。

这怎么说的有点绕口呢，举个栗子`console.log("hello world");`

原理: 通过 AST 找到`console`对象，再找到它`log`函数，最后运行函数，参数为`hello world`

### 准备工具

* Babylon, 用于解析代码，生成 AST
* babel-types, 判断节点类型
* [astexplorer](https://astexplorer.net/), 随时查看抽象语法树

### 开始撸代码

我们以运行`console.log("hello world")`为例

打开[astexplorer](https://astexplorer.net/)， 查看对应的 AST

![1](https://user-images.githubusercontent.com/9758711/37197849-4df2acb2-23b7-11e8-855b-8cb7ebdd2203.png)

由图中看到，我们要找到`console.log("hello world")`，必须要向下遍历节点的方式，经过`File`、`Program`、`ExpressionStatement`、`CallExpression`、`MemberExpression`节点，其中涉及到``Identifier``、``StringLiteral``节点

我们先定义`visitors`, `visitors`是对于不同节点的处理方式

```javascript
const visitors = {
  File(){},
  Program(){},
  ExpressionStatement(){},
  CallExpression(){},
  MemberExpression(){},
  Identifier(){},
  StringLiteral(){}
};
```

再定义一个遍历节点的函数

```javascript
/**
 * 遍历一个节点
 * @param {Node} node 节点对象
 * @param {*} scope 作用域
 */
function evaluate(node, scope) {
  const _evalute = visitors[node.type];
  // 如果该节点不存在处理函数，那么抛出错误
  if (!_evalute) {
    throw new Error(`Unknown visitors of ${node.type}`);
  }
  // 执行该节点对应的处理函数
  return _evalute(node, scope);
}
```

下面是对各个节点的处理实现

```javascript
const babylon = require("babylon");
const types = require("babel-types");

const visitors = {
  File(node, scope) {
    evaluate(node.program, scope);
  },
  Program(program, scope) {
    for (const node of program.body) {
      evaluate(node, scope);
    }
  },
  ExpressionStatement(node, scope) {
    return evaluate(node.expression, scope);
  },
  CallExpression(node, scope) {
    // 获取调用者对象
    const func = evaluate(node.callee, scope);

    // 获取函数的参数
    const funcArguments = node.arguments.map(arg => evaluate(arg, scope));

    // 如果是获取属性的话: console.log
    if (types.isMemberExpression(node.callee)) {
      const object = evaluate(node.callee.object, scope);
      return func.apply(object, funcArguments);
    }
  },
  MemberExpression(node, scope) {
    const { object, property } = node;

    // 找到对应的属性名
    const propertyName = property.name;

    // 找对对应的对象
    const obj = evaluate(object, scope);

    // 获取对应的值
    const target = obj[propertyName];

    // 返回这个值，如果这个值是function的话，那么应该绑定上下文this
    return typeof target === "function" ? target.bind(obj) : target;
  },
  Identifier(node, scope) {
    // 获取变量的值
    return scope[node.name];
  },
  StringLiteral(node) {
    return node.value;
  }
};

function evaluate(node, scope) {
  const _evalute = visitors[node.type];
  if (!_evalute) {
    throw new Error(`Unknown visitors of ${node.type}`);
  }
  // 递归调用
  return _evalute(node, scope);
}

const code = "console.log('hello world')";

// 生成AST树
const ast = babylon.parse(code);

// 解析AST
// 需要传入执行上下文，否则找不到``console``对象
evaluate(ast, { console: console });
```

在 Nodejs 中运行试试看

```bash
$ node ./index.js
hello world
```

然后我们更改下运行的代码 `const code = "console.log(Math.pow(2, 2))";`

因为上下文没有`Math`对象，那么会得出这样的错误 `TypeError: Cannot read property 'pow' of undefined`

记得传入上下文`evaluate(ast, {console, Math});`

再运行，又得出一个错误`Error: Unknown visitors of NumericLiteral`

原来`Math.pow(2, 2)`中的 2，是数字字面量

![2](https://user-images.githubusercontent.com/9758711/37199318-4068cafe-23bc-11e8-96e8-c72fb151c967.png)

节点是`NumericLiteral`, 但是在`visitors`中，我们却没有定义这个节点的处理方式.

那么我们就加上这么个节点:

```javascript
NumericLiteral(node){
    return node.value;
  }
```

再次运行，就跟预期结果一致了

```bash
$ node ./index.js
4
```

到这里，已经实现了最最基本的函数调用了

### 进阶

既然是解释器，难道只能运行 hello world 吗？显然不是

#### 我们来声明个变量吧

```javascript
var name = "hello world";
console.log(name);
```

先看下 AST 结构

![3](https://user-images.githubusercontent.com/9758711/37199679-503e3198-23bd-11e8-97a9-76b86b8513bb.png)

`visitors`中缺少`VariableDeclaration`和`VariableDeclarator`节点的处理，我们给加上

```javascript
VariableDeclaration(node, scope) {
    const kind = node.kind;
    for (const declartor of node.declarations) {
      const {name} = declartor.id;
      const value = declartor.init
        ? evaluate(declartor.init, scope)
        : undefined;
      scope[name] = value;
    }
  },
  VariableDeclarator(node, scope) {
    scope[node.id.name] = evaluate(node.init, scope);
  }
```

运行下代码，已经打印出`hello world`

#### 我们再来声明函数

```javascript
function test() {
  var name = "hello world";
  console.log(name);
}
test();
```

根据上面的步骤，新增了几个节点

```javascript
BlockStatement(block, scope) {
    for (const node of block.body) {
      // 执行代码块中的内容
      evaluate(node, scope);
    }
  },
  FunctionDeclaration(node, scope) {
    // 获取function
    const func = visitors.FunctionExpression(node, scope);

    // 在作用域中定义function
    scope[node.id.name] = func;
  },
  FunctionExpression(node, scope) {
    // 自己构造一个function
    const func = function() {
      // TODO: 获取函数的参数
      // 执行代码块中的内容
      evaluate(node.body, scope);
    };

    // 返回这个function
    return func;
  }
```

然后修改下`CallExpression`

```javascript
// 如果是获取属性的话: console.log
if (types.isMemberExpression(node.callee)) {
  const object = evaluate(node.callee.object, scope);
  return func.apply(object, funcArguments);
} else if (types.isIdentifier(node.callee)) {
  // 新增
  func.apply(scope, funcArguments); // 新增
}
```

运行也能过打印出`hello world`

[完整示例代码](https://gist.github.com/axetroy/9388f7a1f2f6a46ed0bed78a44d5f603)

## 其他

限于篇幅，我不会讲怎么处理所有的节点，以上已经讲解了基本的原理。

对于其他节点，你依旧可以这么来，其中需要注意的是: **上文中，作用域我统一用了一个 scope，没有父级/子级作用域之分**

也就意味着这样的代码是可以运行的

```javascript
var a = 1;
function test() {
  var b = 2;
}
test();
console.log(b); // 2
```

处理方法: 在递归 AST 树的时候，遇到一些会产生子作用域的节点，应该使用新的作用域，比如说`function`，`for in`等

## 最后

以上只是一个简单的模型，它连玩具都算不上，依旧有很多的坑。比如:

* 变量提升, 作用域应该有预解析阶段
* 作用域有很多问题
* 特定节点，必须嵌套在某节点下。比如 super()就必须在 Class 节点内，无论嵌套多少层
* this 绑定
* ...

连续几个晚上的熬夜之后，我写了一个比较完善的库[vm.js](https://github.com/axetroy/vm.js)，基于[jsjs](https://github.com/bramblex/jsjs)修改而来，站在巨人的肩膀上。

与它不同的是:

* 重构了递归方式，解决了一些没法解决的问题
* 修复了多项 bug
* 添加了测试用例
* 支持 es6 以及其他语法糖

目前正在开发中, 等待更加完善之后，会发布第一个版本。

欢迎大佬们拍砖和 PR.

> 小程序今后变成大程序，业务代码通过 Websocket 推送过来执行，小程序源码只是一个空壳，想想都刺激.

项目地址: [https://github.com/axetroy/vm.js](https://github.com/axetroy/vm.js)

在线预览: [http://axetroy.github.io/vm.js/](http://axetroy.github.io/vm.js/)

原文: [http://axetroy.xyz/#/post/172](http://axetroy.xyz/#/post/172)

从零开始写一个Javascript解析器

也就前两天，面试大厂，其中有那么一个问题:

1. 你了解过Babel吗？

> 了解过抽象语法树，又称AST，有学习过，也写过一个基于AST的[乞丐版模板引擎](https://github.com/axetroy/pag)，先是词法解析token，然后生产抽象语法树，然后更改抽象语法树，当然这是插件做的事情，最后根据新的AST生成代码。


2. 写过Babel插件吗

> 没有，只是看过相关文档

3. 如果让你写一个插件，你能写的出来吗?

> 应该可以吧...

遂卒....

开玩笑的，既然提到了，又没回答上来什么，哎哟我这暴脾气，一想到今晚就睡不着，连夜把它撸了。

那么我们来从零写个插件吧。

写一个预计算简单表达式的插件

### 预览

Before:

```javascript
const result = 1 + 2 + 3 + 4 + 5;
```

After:

```javascript
const result = 15;
```

以上的例子可能大家不会经常遇到，因为傻x才会这么写，但是有可能你会这么写

```javascript
setTimeout(function(){
  // do something
}, 1000 * 2) // 插件要做的事，就是把 1000 * 2 替换成 2000
```

### 前提条件

- [Babel相关概念](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)

### 开工

再写代码之前，你需要明白Babel它的原理，简单点说： **Babel解析成AST，然后插件更改AST，最后由Babel输出代码**

那么Babel的插件模块需要你暴露一个function，function内返回visitor

```javascript
module.export = function(babel){
  return {
    visitor:{
    }
  }
}
```

visitor是对各类型的AST节点做处理的地方，那么我们怎么知道Babel生成了的AST有哪些节点呢？

很简单，你可以把Babel转换的结果打印出来，或者这里有传送门: [AST explorer](https://astexplorer.net/)

![1](https://user-images.githubusercontent.com/9758711/36645536-6165e5c2-1aa5-11e8-8bd1-fad3e2080658.JPG)

这里我们看到 ``const result = 1 + 2``中的``1 + 1``是一个``BinaryExpression``节点，那么在visitor中，我们就处理这个节点

```javascript
var babel = require('babel-core');
var t = require('babel-types');

const visitor = {
  BinaryExpression(path) {
    const node = path.node;
    let result;
    // 判断表达式两边，是否都是数字
    if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
      // 根据不同的操作符作运算
      switch (node.operator) {
        case "+":
          result = node.left.value + node.right.value;
          break
        case "-":
          result = node.left.value - node.right.value;
          break;
        case "*":
          result =  node.left.value * node.right.value;
          break;
        case "/":
          result =  node.left.value / node.right.value;
          break;
        case "**":
          let i = node.right.value;
          while (--i) {
            result = result || node.left.value;
            result =  result * node.left.value;
          }
          break;
        default:
      }
    }

    // 如果上面的运算有结果的话
    if (result !== undefined) {
      // 把表达式节点替换成number字面量
      path.replaceWith(t.numericLiteral(result));
    }
  }
};

module.exports = function (babel) {
  return {
    visitor
  };
}
```

插件写好了，我们运行下插件试试

```javascript
const babel = require("babel-core");

const result = babel.transform("const result = 1 + 2;",{
  plugins:[
    require("./index")
  ]
});

console.log(result.code); // const result = 3;
```

与预期一致，那么转换 ``const result = 1 + 2 + 3 + 4 + 5;``呢? 

结果是: ``const result = 3 + 3 + 4 + 5;``

这就奇怪了，为什么只计算了``1 + 2``之后，就没有继续往下运算了?

我们看一下这个表达式的AST树

![2](https://user-images.githubusercontent.com/9758711/36645660-2bdd028a-1aa7-11e8-9131-c38c232ccb10.JPG)

你会发现Babel解析成表达式里面再嵌套表达式。

```
表达式( 表达式( 表达式( 表达式(1 + 2) + 3) + 4) + 5)
```

而我们的判断条件并不符合所有的，只符合``1 + 2``

```javascript
    // 判断表达式两边，是否都是数字
    if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {}
```

那么我们得改一改

第一次计算``1 + 2``之后，我们会得到这样的表达式

```
表达式( 表达式( 表达式(3+ 3) + 4) + 5)
```

其中 ``3 + 3``又符合了我们的条件， 我们通过向上递归的方式遍历父级节点

又转换成这样:

```
表达式( 表达式(6 + 4) + 5)
表达式(10 + 5)
15
```

```javascript
    // 如果上面的运算有结果的话
    if (result !== undefined) {
      // 把表达式节点替换成number字面量
      path.replaceWith(t.numericLiteral(result));

      let parentPath = path.parentPath;

      // 向上遍历父级节点
      parentPath && visitor.BinaryExpression.call(this, parentPath);
    }
```

到这里，我们就得出了结果 ``const result = 15;``

那么其他运算呢:

``const result = 100 + 10 - 50`` >>> ``const result = 60;``

``const result = (100 / 2) + 50`` >>> ``const result = 100;``

``const result = (((100 / 2) + 50 * 2) / 50) ** 2`` >>> ``const result = 9;``

### 完结

到这里，已经向你大概的讲解了，如何编写一个Babel插件，再也不怕面试官问我答不出什么了哈...

你以为这就完了吗?

并没有

如果转换这样呢: ``const result = 0.1 + 0.2;``

预期肯定是``0.3``, 但是实际上，Javascript有浮点计算误差，得出的结果是``0.30000000000000004``

那是不是这个插件就没卵用？

这就需要你去矫正浮点运算误差了，可以使用[Big.js](https://github.com/MikeMcl/big.js);

比如: ``result = node.left.value + node.right.value;`` 改成 ``result = +new Big(node.left.value).plus(node.right.value);``

你以为完了吗? 这个插件还可以做很多

比如: ``Math.PI * 2`` >>> ``6.283185307179586``

比如: ``Math.pow(2,2)`` >>> ``4``

...

...

最后上项目地址: [https://github.com/axetroy/babel-plugin-pre-calculate-number](https://github.com/axetroy/babel-plugin-pre-calculate-number)

面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒

基于在上一家公司的开发经验，沉淀而来的web框架。

Kost 基于 Koa，使用 Typescript 编写，借鉴于 egg 的**约定大于配置**的思想以及 nest 的依赖注入和装饰器路由。

是一款内置多个功能，并遵循一系列规范的 Web 框架。

### 框架架构

![kost](https://raw.githubusercontent.com/axetroy/kost/master/kost.png)

## Q & A

Q: 为什么开发这样的框架

> A: 框架基于以前的项目经验沉淀而来，首先是坚持 Typescript 不动摇，能在开发阶段避免了很多 bug。

Q: 为什么不使用 nest？

> A: 因为它是基于 Express，而我以前的项目都是 Typescript + Koa

Q: 为什么不使用 egg?

> A: egg 使用 JS 开发，目前对 Typescript 没有一个很好的方案(见识短，没发现)，而且 egg 的 service 会丢失类型 IDE 提示，目前 egg 成员已在着手解决这个问题，期待中...

Q: 与两者的框架区别在哪里?

> A: 借鉴了 egg 的约定大于配置的思想，约定了一些文件目录，文件名，如果不按照框架写，就会 boom。借鉴了 nest 的 OOP 编程思想，所有的，包括 Controller、Service、Middleware 都是类，都可以进行依赖注入，而且路由定义是装饰器风格，语法糖会让你更加的直观。对于开发而言，会有很好的 IDE 提示。

Q: 框架内置了一些特性，会不会平白增加性能负担？

> A: 根据你是否开启特性，来决定是否引入包，所以不会有性能损耗。

Q: 是否需要配套 CLI 工具?

> A: 目前没有，编译成 JS 就能运行，可以用 pm2 进行负载均衡。

Q: 框架是否包含进程管理?

> A: 框架本身不进行进程管理，没有类似 egg 的 master 主进程管理子进程，没有 agent

## 何为开源

开源就是自己用的爽的东西，拿出来给大家用，然后发现你自己写的，用法和原理你肯定懂啊，但是别人不懂，你得写文档，维护文档的时间，不必写代码的时间少。

同时为了保证项目质量，你还得写测试用例，写测试用例的时间，也并不少。

要维护一个开源项目，真的是要花不少心思，向开源大牛致敬。

## 总结

实现起来没什么难度，前人栽树，后人乘凉，继承自Koa的类，然后在start之前，做一些初始化动作，加载Controller，验证Controller、Middleware、Service是否正确，加载配置文件等工作...

从创建仓库到现在100+个commit，而大多数commit都是更新文档，添加测试用例，最近也忙，断断续续的维护，今天终于完善了测试用例，覆盖率99%，终于可以发布第一个版本。

有兴趣的小伙伴，一起来维护吗，交个朋友

最后上项目地址: [https://github.com/axetroy/kost](https://github.com/axetroy/kost)

一个装饰器风格，依赖注入，OOP的Web框架

使用windows开发环境，首选的终端就是Git Bash.

但是它一直有一个Bug. 没有正确捕捉CTRL+C的信号并杀死进程.

闲来无事一翻它的更新日志，终于把这个BUG修复了。

再也不用打开任务管理器手动杀死进程了.

[https://github.com/git-for-windows/msys2-runtime/pull/16](https://github.com/git-for-windows/msys2-runtime/pull/16)

### Git for Windows 2.16.0(2)

#### New Features

- Comes with Git Credential Manager v1.14.0.
- The Git for Windows installer now offers to configure Visual Studio Code as default editor for Git.Comes with OpenSSL v1.0.2n.
- git checkout is now a lot faster when checking out a lot of files.
- The core.excludesfile can now reference a symbolic link.
- Comes with patch level 7 of the MSYS2 runtime (Git for Windows flavor) based on Cygwin 2.9.0.
- With lots of files, git reset --hard is now a lot faster when the FSCache feature is in effect.

#### Bug Fixes

- When cloning into an existing (empty) directory fails, Git no longer removes said directory.
- Interrupting processes (and their children) using Control+C is now a lot more robust.

踩坑

Git Bash的N年BUG终于修复了..

### WHY

对于经常造轮子的人来说，最痛苦的事莫过于配置开发环境。

如果你构建一个纯粹的库，你可能需要ES6支持，那么你需要Babel，还需要安装Babel，然后根据需要的特性安装preset，安装plugins

如果你需要构建一个React/Vue组件，那么就不是Babel那么简单，还需要配置Webpack。

包括一堆的Loader，plugins，entry，output，devServer等等，不厌其烦...

所以很迫切的需要一个零配置的开发工具，你看[parcel](https://github.com/parcel-bundler/parcel)不就是因为零配置备受推崇吗。

所以，自己撸一个工具，configless是目标，专注于打包库/组件.

```bash
npm install @axetroy/libpack -g
```

### 构建一个Vue组件

```vue
// index.vue
<template>
  <div>
    <h2>Hello world</h2>
    <h2>This is an Vue example component</h2>
  </div>
</template>

<script>
console.log("Load component");
export default {
  name: "index"
};
</script>

<style scoped>

</style>
```

```bash
# -- externals 指明vue需要外部加载
libpack ./index.vue ./build --externals vue
```

然后你还可以预览一下刚写的组件

```javascript
// main.js
import Vue from "vue";
import App from "./index.vue";

new Vue({
  el: document.body,
  render: h => h(App)
});
```

```bash
libpack ./main.js ./build --server
```

[完整代码](https://github.com/axetroy/libpack/tree/master/examples/vue-component)

### 构建一个React组件

```jsx
// index.jsx
import React, { Component } from "react";

class Example extends Component {
  render() {
    return (
      <div>
        <h2>Hello world</h2>
        <h3>This is an react example component</h3>
      </div>
    );
  }
}

export default Example;
```

```bash
# -- externals 指明react和react-dom需要外部加载
libpack ./index.jsx ./build --watch --externals react,react-dom
```

然后你还可以预览一下刚写的组件

```bash
libpack ./app.jsx ./build --server
```

[完整代码](https://github.com/axetroy/libpack/tree/master/examples/react-component)

### Typescript

```typescript
// src/index.ts
class Person {
  say(word: string) {
    console.log("hello " + word);
  }
}

new Person().say("world");

```

```bash
libpack ./src/index.ts ./build
```

typescript项目需要有tsconfig.json，如果项目目录不存在，那么会创建一个默认配置

[完整代码](https://github.com/axetroy/libpack/tree/master/examples/typescript)

### Flow

```flow
// index.js
// @flow
class Person {
  say(word: string) {
    console.log("hello " + word);
  }
}

new Person().say("world");

```

```bash
libpack ./index.js ./build
```

[完整代码](https://github.com/axetroy/libpack/tree/master/examples/flow)

### Javascript

```javascript
// index.js
console.log("Hello world");

// generator
function* generator() {
  yield Promise.resolve();
}

// async await
async function asyncFunction() {
  await Promise.resolve();
}

// dynamic import
import("./antoher");

// do expression
function doExpression() {
  let a = do {
    if (x > 10) {
      ("big");
    } else {
      ("small");
    }
  };
}

// Object rest spread
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

// decorator
function readable() {
  return function() {};
}

@readable()
class Stream {}
```

```bash
libpack ./index.js ./build
```

[完整代码](https://github.com/axetroy/libpack/tree/master/examples/javascript)

### 最后

``libpack``仅仅是一个内置了多个preset和plugins的Webpack配置，省去了配置的烦恼。

你也不需要关心怎么配置es2015，es2016，es2017，也不用关心你能不能用新特性.

撸起袖子就是干.

欢迎各位大佬指教

Github: [https://github.com/axetroy/libpack](https://github.com/axetroy/libpack)

零配置无痛构建Javascript的库/组件

最近在研究P2P技术，奈何相关资料不多，自己琢磨了一下，分享一下学习P2P的一些原理, 以及如何打造一个P2P聊天应用。

这里指的P2P是指**peer to peer**， 点对点的技术， 每个客户端都是服务端，没有中心服务器，不是websocket针对某个connection推送消息。

### 技术要点

- udp协议
- 节点之间的建立，连接和广播
- 内网穿透，如何能让两个处在内网的节点，相互发现自己的存在，并且建立通信

### 原理

首先解决的是内网穿透的问题，常见的底层协议tcp，udp，他们各自有优缺点，简单说明一下。
tcp：需要处理粘包问题，双工流通道，是可靠的链接。
udp： 每次发送的都是数据包，没有粘包问题，但是连接不可靠，只能传输少量数据

更加详细的请Google

这里选择udp协议，简单一些。

再下来是内网穿透，先说结论： **两个处于不同内部网络的节点，永远无法发现他们之间的相互存在**，你就算是想顺着网线过去打他都不行。

所有的内网穿透原理无外乎需要一个有公网ip的中介服务器，包括虚拟货币像比特币之类的，所以首先要有一个**创世节点**

在NodeJS中，创建udp服务也很简单

```javascript
const dgram = require("dgram");
const udp = dgram.createSocket("udp4");
udp.bind(1090, callback)
```

把服务部署要公网，那么其他所有的节点都能访问，通过中转服务器，能够使得两个节点可以建立连接

![default](https://user-images.githubusercontent.com/9758711/35181909-f648dd14-fe05-11e7-925f-bc987497d88e.png)

我们是要建立这样的P2P网络

![default](https://user-images.githubusercontent.com/9758711/35181912-ffdd34c4-fe05-11e7-8095-b02f171776dc.png)

假如现在只有3个节点： **创世节点**,  **B节点**,  **C节点**， 创世节点有公网IP

我用对话的形式，阐述他们建立链接的过程: 

> B节点: hey，创世节点，我要加入到P2P网络里面，告诉其他兄弟，我来了
> 创世节点: 兄弟们，刚刚有个叫做B的节点加入网络了，你们也去告诉其他节点
> 其他节点: 刚刚收到来自 "创世节点"的通知，有个fresh meet加入网络了，叫做 "B"

...
至此，所有人都知道了B节点加入了网络，里面记载着B节点的相关信息，包括IP地址，包括udp端口号

此时C节点也要加入网络，并且想要和B节点对话: 

> C节点: hey，创世节点，我要加入到P2P网络里面，并且我要和B对话
> 创世节点: 兄弟们，刚刚有个叫做B的节点加入网络了，你们也去告诉其他节点，顺便看看有没有B这个节点
> 其他节点: 刚刚收到来自 "创世节点"的通知，有个fresh meet加入网络了，叫做 "C"，你们也看看有没有B这个节点
> 其他节点2: 收到通知，听说一个叫做C的节点在找一个B节点，我这里有它的信息，ip是xxxx.xxxx.xxx.xxxx, 端口10086
> B节点: 有个C的家伙(ip: xxxx.xxxx.xxxx.xxxx, 端口1000)要找我

到这里，B获取到了C的信息，包括IP和端口，C也拿到了B的信息.

于是，他们两个就可以建立通信。消息流: B <----> C. 中间不经过任何服务器

用一张图来形容: 

![new](https://user-images.githubusercontent.com/9758711/35181917-096414e0-fe06-11e7-85af-cc8d387acb8d.png)

### 总结

在设计中，每个节点的功能都是一样的。如果需要加入到网络中，不一定跟创世节点链接

假设已存在的节点: 创世节点，A、B、C节点，此时有个D节点想要加入到网络。

那么D节点不一定非得链接到创世节点，可以链接到A、B、C中的任意一个节点，然后该节点再广播给其他节点说"Hey, 有个新人叫做D的加入了网络"。

这样所有人都知道，有个叫做D的节点存在，你可以和它通信，同时D节点和会同步已存在的节点。这样D节点也知道了其他节点的存在了。

### 最后

基于这一原理，可以打造出一个P2P的聊天应用，没有中间商赚差价。

这只是一些基本原理，离实际应用还差很多，有很多坑，比如D节点退出网络之后，要广播 “D节点退出网络了，把这个节点注销了吧，这波没他"，还有消息加密，通信的双向验证(A节点想要B节点通信，但是不需要B节点的同意)等等，坑太多，填不完

原计划是搭建这么一个网络，然后写个electron的聊天应用，但是精力有限，就这样了。[代码](https://github.com/axetroy/p2p-chat)(写的丑，轻拍)

文字功底有点差，表述不清楚，见谅，如文中有误，欢迎指正与交流。

学习

搭建P2P网络的原理

学习下AST，写一个简单的模板解析器 [pag](https://github.com/axetroy/pag)

也算是对刚刚过去的2017年做个总结: **Pack And Go**

充满了伤感与无奈

Pack And Go

在日常开发中，会写一些轮子，服务，需要部署到线上，来个``online demo``，或者``try it out``

而有些服务商，就专门提供了免费服务，可以部署你的应用

这里我们选择[Heroku](https://www.heroku.com/)，以部署``NodeJS``和``Golang``为例

把部署过程记录下来，方便下次部署的适时候，想不起来还能翻一番
### 部署前提

- [x] 一个Heroku账号，免费申请，免费应用数5个
- [x] 你应用的源码
- [ ] Heroku命令行工具(可选)

### NodeJS

我们这里搭建一个简单的HTTP服务器

你只需要2个文件即可部署

**package.json**
```json
{
  "name": "heroku-deploy-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/axetroy/heroku-deploy-example.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/axetroy/heroku-deploy-example/issues"
  },
  "homepage": "https://github.com/axetroy/heroku-deploy-example#readme"
}
```

**index.js**
```javascript
const http = require("http");

const port = process.env.PORT || 3000;

const server = http.createServer();

server.on("request", function(req, res) {
  res.end("hello world, power by NodeJS");
});

server.listen(port, function() {
  console.log("Listen on port " + port);
});
```

然后托管在你的Github项目上

登陆Heroku，打开控制面部，新建应用，填写一个未被占用的名字

本次使用``node-deploy-example``

![img1](https://user-images.githubusercontent.com/9758711/34905198-efacc866-f88e-11e7-8f03-8825a044deac.png)

新建成功后，进入到应用详情的``Deploy``选项，选择以Github方式部署

![img2](https://user-images.githubusercontent.com/9758711/34905215-190759c4-f88f-11e7-9350-a6200d67eeab.png)

然后搜索你的Github仓库名，并且选择部署

![img3](https://user-images.githubusercontent.com/9758711/34905229-48b69ed2-f88f-11e7-8b91-bf25de2f7aab.png)

部署成功

![img4](https://user-images.githubusercontent.com/9758711/34905234-58898cf2-f88f-11e7-8bc5-eba7adbf8d4d.png)

然后访问域名试试: [https://node-deploy-example.herokuapp.com](https://node-deploy-example.herokuapp.com)

### Go

这次部署Go我们选择使用``Heroku CLI``来部署

前提条件: 

- [x] [Godep](https://github.com/tools/godep)
- [x] [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)

使用CLI部署，不要求你的代码要托管在某个仓库，比如Github，如果你的应用不开源，那么就选用CLI部署

首先要安装CLI工具，这里我使用npm安装

```bash
npm install -g heroku-cli
```

然后登陆你的账号

```bash
heroku login # 会要求你输入账号/密码
```

创建一个应用，名为``go-deploy-example``

然后新建文件

**main.go**
```go
package main

import (
	"net/http"
	"log"
	"os"
)

func main() {

	port := os.Getenv("PORT")

	if port == "" {
		port = "3000"
	}

	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		w.Write([]byte("hello world, power by Golang"))
	})

	log.Printf("Listen on portt %s\n", port)

	log.Fatal(http.ListenAndServe(":"+port, nil))
}
```

**Procfile**

```yaml
web: go-heroku-deploy-example # 这里运行编译的二进制名
```

使用[Godep](https://github.com/tools/godep)生成依赖文件

```bash
godep save ./...
```

运行命令部署

```bash
git init
heroku git:remote -a go-deploy-example
git add .
git commit -am "make it better"
git push heroku master
```

到这里部署结束，访问这个试试: [https://go-deploy-example.herokuapp.com/](https://go-deploy-example.herokuapp.com/)

### 注意

1. 普通的账号，最多能部署5个应用。如果绑定信用卡，将不受限制。
2. 应用内监听的端口应该从环境变量中读取
3. 免费应用请珍惜. 不要搞事. (我在上面部署了5个挖矿机，被封号了)

部署过程非常的简单，如果你有好的应用要分享。

又苦于没那么线上服务器，那么就部署要Heroku上吧。

有个``Online Demo``更具有说服力哦

在Heroku上部署你的应用

### 简单先说一下Go的defer特性:

- defer是后进先出的原则执行
- defer是在函数运行结束之后，才会运行

### 那么这些特性能干什么

- 延迟任务
- 尾部验证(比如运行函数之后，需要对返回值校验)
- 资源销毁


### 一个具体的场景

在后端开发中，可能需要多人协作，多语言，多模块开发。这时候可能就需要用[RPC](https://zh.wikipedia.org/wiki/%E9%81%A0%E7%A8%8B%E9%81%8E%E7%A8%8B%E8%AA%BF%E7%94%A8
)通信

比如有个用户模块，在进入到一个业务的时候，你需要去验证用户是否合法

```javascript
async function main(username) {
  const client = await rpc.createConnection(); // 创建RPC链接
  const data = await client.getUserInfo(username); // 通过RPC链接获取用户信息
  // 下面是业务逻辑
}
```

但是你发现，RPC链接并没有被关闭(即便函数执行完毕，对象``client``被销毁)， 它依旧占用着服务端的资源，如果多次调用这个函数，会多服务端造成很大的压力.

解决方案有两个

1. 维护连接池
2. 在每次创建链接之后都销毁

第一种方法是大多数ORM，RPC框架做的，应用内只保持n个链接，不断的创建再销毁，而这个过程不用使用者关心。
很可惜的是，我选用的RPC框架``Thrift``，有屎一样的坑。为了保持和Go的业务逻辑一样，采用第二种方案，``每次创建链接之后都销毁``，保证它是干净的

依旧是上面的代码，改成这样

```javascript
async function main(username) {
  const client = await rpc.createConnection(); // 创建RPC链接
  try{
    const data = await client.getUserInfo(username); // 通过RPC链接获取用户信息
    // 下面是业务逻辑
  }catch (err){
    await client.close(); // 关闭链接
    throw err
  }
}
```

上面的代码已经能很好的解决问题了，但是也有一个，如果需要关闭多种链接呢(比如RPC，DB，Socket等)，一直try，catch也不是办法

受到Go的defer启发，于是写了这么一个库[godefer](https://github.com/axetroy/godefer) ， 依旧改写上面的代码

```javascript
const godefer = require('godefer');

const main = godefer(async function(username, defer) {
  const client = await rpc.createConnection();

  // 注册一个defer函数
  defer(function() {
    client.close(); // 关闭链接
  });
  
  const data = await client.getUserInfo(username);
  
  // 下面是业务逻辑
  // ...
  // 运行完毕，则开始执行defer
});
```

Defer函数的执行，遵循了``后进先出``的原则， 即 **先注册的defer函数，后运行**

实现上与Go差不多, 有一点重要的差别是:

> Go的defer内，能修改父级函数的返回值
> godefer不能修改(不是不能做，而是不做)
  
好了，愉快的解决问题了， 有什么想法，评论来刚啊
  

Golang defer的Javascript实现

## 使用docker-compose组件镜像容器

```bash
docker-compose up
docker-compose down
```

### nginx

托管静态目录

```yaml
version: '3'
services:
  i18n_nginx_static:
    image: nginx:1.13.8-alpine
    restart: always
    working_dir: /home/static
    volumes:
       - ./dist:/usr/share/nginx/html
    ports:
      - 6098:80
```

### NodeJS

启动NodeJS App

```yaml
version: '3'
services:
  pg:
    image: postgres:9.6.6-alpine
    restart: always
    volumes:
      - "./docker/volumes/pg:/var/lib/postgresql/data"
    ports:
      - 6432:5432
  node:
    image: keymetrics/pm2:8-alpine
    user: "node"
    working_dir: /home/node/app
    environment:
      - NODE_ENV=production
    volumes:
      - ./:/home/node/app
    ports:
      - 6099:6099
    links:
      - pg
```

### 最后

记录下我写的 Docker compose 配置集合，集合了一些常用的配置

https://github.com/axetroy/docker-configuration

常用的Docker配置及使用

在部署矿机到Google Cloud的适合，遇到的问题，记录下来

```bash
/home/troy450409405/node/miner/node_modules/puppeteer/.local-chromium/linux-497674/chrome-linux/chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared
 object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
```

相关问题: https://github.com/GoogleChrome/puppeteer/issues/391#issuecomment-325420271

安装依赖:

```bash
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
```

Chromium在CenterOS缺少依赖的问题

怎么说呢, 市面上的小程序框架都不令人满意.

要么太臃肿, Bug多, 要么过于封装(比如wepy)

总之, 对我来说就是不好用.

但是我又想使用npm社区的便利, 又不使用框架(兼容以前的小程序).

那么只好写个构建工具出来.

使用 Webpack + Babel 等技术

项目地址:  https://github.com/axetroy/webuild

ps: 本来想写个框架的

使用特定的声明方式(decorator, 像Angular)声明app/页面/组件.

但是后来尝试了一下, 复杂度太高. 基本上原生开发已经能满足我的需求了

写了个微信小程序开发工具[WeBuild]

# Why

社区中有很多数据校验库，各功能不一。有些库有你想要的功能，有些库又没有。有写库又喜欢定义自己的模板，然后这些模板改着改着就成了 `Magic String(魔符)`

例如这样的模板:

```
validate(data, 'size:4')
validate(data, 'size:2-4')
validate(data, 'lt:20 || gt: 60 && is_prime')
...
```

现在是大前端时代，讲究的是 All in Javascript。也符合 React 的哲学。另一个套路 Javascript in HTML(Template) 是不友好的(AngularJs 我用了一年多)

目前比较满意的应该是这一款: [superstruct](https://github.com/ianstormtaylor/superstruct)

但是对我而言，它还是不顺手，如何校验多个条件? 如何做无限嵌套，包括数组/对象嵌套。

先上一个结构体，你们感受一下

#### 深度嵌套的对象

```javascript
// 如何检验这个数据, 虽然实际中，谁这么定义数据结构，会被打死
const data1 = {
  name: "axetroy",
  age: 18,
  country: {
    name: "China",
    province: {
      name: "You Guess",
      city: {
        name: "The capital of the province",
        street: {
          name: "suburbs",
          number: {
            code: 100031,
            owner: "Axetroy",
            family: [
              { name: "daddy" },
              { name: "mom" },
              { name: "brother" },
              { name: "sister" }
            ]
          }
        }
      }
    }
  }
};
```

所以才写一个自己顺手的东西。

### 结构体

先来一个简单的类型校验，只有名字和年龄

```javascript
const { Struct, type } = require("@axetroy/struct");

const struct = Struct({
  name: type.string,
  age: type.int
});
```

它还可以这么写, 自己自定义一个 func 作为校验

```javascript
const struct = Struct({
  name: type.string,
  age: type.func(function(input) {
    return parseInt(input) === input;
  })
});
```

甚至几个条件去校验一个字段, 带着参数

```javascript
const struct = Struct({
  name: type.string,
  age: type.int.gte(18).lte(50) // 需要 >=18 && <=50
});
```

然后你还能定义某个字段的错误信息

```javascript
const struct = Struct({
  name: type.string,
  age: type.int.gte(18).lte(50).msg("保险仅限于18-50周岁之间")
});
```

然后还支持数组

```javascript
const struct = Struct({
  name: type.string,
  age: type.int,
  friends: [type.string]
});
```

同样支持数组里面嵌套对象

```javascript
const struct = Struct({
  name: type.string,
  age: type.int,
  friends: [
    {
      name: type.string,
      age: type.int
    }
  ]
});
```

还可以自定义函数

```javascript
const struct = Struct({
  name: type.string,
  age: type.int,
  friends: [
    function(element) {
      if (typeof element.name !== "string") {
        return false;
      } else if (typeof element.age !== "number") {
        return false;
      }
      return true;
    }
  ]
});
```

如果你还想组合多个校验器，还可以这么用

```javascript
const struct = Struct({
  name: type.string,
  age: type.int,
  friends: [
    type.func(function(element) {
      if (typeof element.name !== "string") {
        return false;
      } else if (typeof element.age !== "number") {
        return false;
      }
      return true;
    }).isAdult
  ]
});
```

内置的校验器基本够平时校验使用

* [x] **number**
* [x] **int**
* [x] **float**
* [x] **string**
* [x] **bool**
* [x] **any**
* [x] **odd**
* [x] **even**
* [x] **json**
* [x] **object(object)**
* [x] **array(type)**
* [x] **eq(value)**
* [x] **gt(number)**
* [x] **gte(number)**
* [x] **lt(number)**
* [x] **lte(number)**
* [x] **bt(minNumber, maxNumber)**
* [x] **in(array)**
* [x] **len(int)**
* [x] **msg(message)**
* [x] **func(validatorFunc)**

如果这些都没有你想要的，那么你还可以自定义

```javascript
Struct.define("email", function(input) {
  return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
    input
  );
});

// 然后这么使用
const struct = Struct({
  name: type.string,
  age: type.int,
  email: type.email
});
```

如果想定义一个带参数的校验器

```javascript
// 发现了吗，校验器名字，跟上面的区别就是多了括号()
Struct.define("prefixWith()", function(prefix) {
  return function(input) {
    return input.indexOf(prefix) === 0;
  };
});

const struct = Struct({
  name: type.string.prefixWith("[A]"), // 名字必须是字符串，并且以[A]开头
  age: type.int
});
```

好了，最后回归到我们开头说的，[深度嵌套的对象](#深度嵌套的对象)，怎么去解析

```javascript
const struct = Struct({
  name: type.string,
  age: type.int,
  country: {
    name: type.string,
    province: {
      name: type.string,
      city: {
        name: type.string,
        street: {
          name: type.string,
          number: {
            code: type.int,
            owner: type.string,
            family: [
              {
                name: type.string
              }
            ]
          }
        }
      }
    }
  }
});
```

但是实际当中，我们可能不会这么定义这么一个庞大的数据结构。

而是分成细化的结构体。

比如一篇文章:

```javascript
const User = Struct({
  name: type.string,
  age: type.int
});

const Article = Struct({
  title: type.string,
  content: type.string,
  author: User // 作者嵌套ser
});
```

在比如一个项目的信息:

```javascript
const User = Struct({
  name: type.string,
  age: type.int
});

const Project = Struct({
  name: type.string,
  contributors: [User] // 数组的元素为User结构体
});
```

前面都说了定义结构体，那么输出呢?　依旧从最简单的入手

```javascript
const struct = Struct({
  name: type.string,
  age: type.int
});

const err = struct.validate(data);

console.log(err);
```

`struct.validate`是执行校验工作。

如果校验过程中，有某个字段，不符合校验器的要求。

那么校验终止，并且返回这个错误。

如果校验成功，那么返回`undefined`

校验失败返回的错误为自定义错误`TypeError`，继承自`Error`

`TypeError`有一下属性:

* **validator**: 失败的校验器名字
* **path**: 路径数组。
* **value**: 校验失败的值
* **message**: 错误信息, 默认与 detail 同值，除非你使用`.msg(errorMessage)`去修改错误信息
* **detail**: 默认的错误信息

```
{ Error
    at Object.<anonymous> (/home/axetroy/gpm/github.com/axetroy/struct/src/error.js:19:23)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/axetroy/gpm/github.com/axetroy/struct/src/type.js:2:19)
    at Module._compile (module.js:635:30)
  validator: 'int',
  path: [ 'author', 'age' ],
  value: '18',
  detail: 'Can not pass the validator "int" with value "18" in path "age"',
  message: 'Can not pass the validator "int" with value "18" in path "age"' }
```

### 最后

总结一下这个库的特点:

* [x] 全部是 Javascript 语法, 没有自定义模板字符串.
* [x] 严格模式. 没有定义类型的字段会不通过
* [x] 支持结构体嵌套
* [x] 可扩展, 可以在行内写校验器, 也可以新增一个全局类型.
* [x] 校验器支持带参数.
* [x] 简明的错误信息输出
* [x] 支持无线嵌套对象/数组. 数组里面嵌套对象, 然后对象里面又嵌套数组. OK.

数据校验库层出不穷，关键也不看是不是很强大。

关键是要自己用得顺手。

代码覆盖率 100%，大量测试通过。

目前已运用到实际的生产环境中。

应用在哪里?

* [x] 配置文件, 程序运行时读取配置文件进行校验
* [x] 测试接口数据的输入/出校验

库没有使用 es6 语法, 也没有使用 Babel 编译, 没有使用 Webpack 打包.

但是理论上是支持浏览器和 Node 的.

浏览器需要使用打包工具引入.

最后上项目地址: [struct](https://github.com/axetroy/struct)


Struct@2, 优雅的，高度自定义的数据校验库

一个开源项目，如何在别人一眼看上去就觉得靠谱，有点逼格。

这是一个值得深思的问题。可能代码不咋地，需要一些东西来装饰。

### 如果你是开源社区的大牛

那还说什么，强如tj大神，开个仓库就是热门项目

### Logo

Logo即是商标，容易让人记住。也有的彰显着项目用途

比如这个趣图(来自[github.com/tj/node-prune](https://github.com/tj/node-prune))

![huge](https://pbs.twimg.com/media/DEIV_1XWsAAlY29.jpg)

### Badge

徽章能一眼反映出一个开源项目的状态。比如，测试是否通过，代码覆盖率，依赖关系，兼容性，当前版本，许可文件等

比如[github.com/vuejs/vue](https://github.com/vuejs/vue)


<p align="center">
  <a href="https://circleci.com/gh/vuejs/vue/tree/dev"><img src="https://img.shields.io/circleci/project/vuejs/vue/dev.svg" alt="Build Status"></a>
  <a href="https://codecov.io/github/vuejs/vue?branch=dev"><img src="https://img.shields.io/codecov/c/github/vuejs/vue/dev.svg" alt="Coverage Status"></a>
  <a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/dm/vue.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/v/vue.svg" alt="Version"></a>
  <a href="https://www.npmjs.com/package/vue"><img src="https://img.shields.io/npm/l/vue.svg" alt="License"></a>
  <a href="https://chat.vuejs.org/"><img src="https://img.shields.io/badge/chat-on%20discord-7289da.svg" alt="Chat"></a>
  <br>
  <a href="https://saucelabs.com/u/vuejs"><img src="https://saucelabs.com/browser-matrix/vuejs.svg" alt="Sauce Test Status"></a>
</p>

你可以从[shields.io](https://shields.io/)自定义自己想要的徽章

大多数你需要的，有已经定义好了

### Github的issue/pull request模板

项目根目录下，应该有个``.github``文件夹

- **ISSUE_TEMPLATE.md** (issue模板)

```markdown
**I'm submitting a ...**  (check one with "x")

- [ ] bug report => search github for a similar issue or PR before submitting
- [ ] feature request
- [ ] support request

**Current behavior**


**Expected behavior**


**More detail**


**Please tell us about your environment:**
```

- **PULL_REQUEST_TEMPLATE.md** (pull request模板)

```markdown
**Please check if the PR fulfills these requirements**
- [ ] The commit message follows **commit message standard**
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)


**What kind of change does this PR introduce?** (check one with "x")

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Test change
[ ] Chore change
[ ] Update Document
[ ] Other... Please describe:

**What is the current behavior?** (You can also link to an open issue here)



**What is the new behavior?**



**Does this PR introduce a breaking change?** (check one with "x")

[ ] Yes
[ ] No


If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...


**Other information**:
```

### 配合CI工具

Github有开放API，可以接入各种好玩，实用的bot

#### [Travis](https://travis-ci.org/)

Travis是一个自动化测试的CI工具，你每push一次，在travis平台会运行一次test。然后把测试结果通过邮件的形式告知你。

它还可以生成一个漂亮的徽章，如这样[![Build Status](https://travis-ci.org/axetroy/go-fs.svg?branch=master)](https://travis-ci.org/axetroy/go-fs)

以为Go项目为例，这是``.travis.yml``文件，放置在项目根目录下

```yaml
# .travis.yml
language: go
sudo: false

os:
  - linux

go: master

script:
  - go test -v
```

#### [Coveralls](https://coveralls.io/)

Coveralls是一个代码覆盖率的分析平台。

使用工具生产覆盖率的文件，然后提交给Coveralls平台。当然可以结合travis使用。

travis每运行一次test之后，可以把test的结果报告发送给Coveralls。

Coveralls同样也会生成一个漂亮的徽章，如这样[![Coverage Status](https://coveralls.io/repos/github/axetroy/go-fs/badge.svg?branch=master)](https://coveralls.io/github/axetroy/go-fs?branch=master)

要使用它，仅需要2个步骤

1. 在Coveralls平台添加项目
2. 修改``.travis.yml``配置，然后提交

继续以Go为例。

```yaml
# .travis.yml
language: go
sudo: false

os:
  - linux

go: master

before_script:
  # 加载依赖
  - go get golang.org/x/tools/cmd/cover
  - go get github.com/mattn/goveralls

script:
  - go test -v -covermode=count -coverprofile=coverage.out  # 运行测试，并且生成测试报告
  - $HOME/gopath/bin/goveralls -coverprofile=coverage.out -service=travis-ci  # 将测试报告提交给Coveralls
```

#### [new-issue-welcome](https://github.com/behaviorbot/new-issue-welcome)

这个CI工具会在其他人，在项目第一次发起issue的时候，bot会自动回复。一个友好的问题

<img width="801" alt="screen shot 2017-07-17 at 1 31 50 pm" src="https://user-images.githubusercontent.com/13410355/28288547-5f83aa8e-6af4-11e7-9692-eb41d42431e2.png">

#### [request-info](https://github.com/behaviorbot/request-info)

当有一个没有任何描述的issue产生时，bot会自动回复，提示创建者提供更多的信息

<img width="1041" alt="screen shot 2017-07-07 at 3 32 01 pm" src="https://user-images.githubusercontent.com/13410355/28132821-d37bf2a8-66f2-11e7-9e7b-5930ba65d67a.png">

#### [stale](https://github.com/probot/stale)

当一个issue或PR很久没有回复的时候，这个bot会帮助你把它关掉

[![](https://cloud.githubusercontent.com/assets/173/23858697/4885f0d6-07cf-11e7-96ed-716948027bbc.png)](https://github.com/probot/demo/issues/2)

### Document

一般而言，一个小功能的库，是不需要文档的，只需要在README里面声明调用方法。

当项目是一个复杂的库/框架/工具的时候。有能就需要提供一个详细的文档。

Github提供了``gh-pages``分支用以存放文档，或者在``master``分支下的docs文件夹，在项目设置里面设置好即可

有简单粗暴型，直接以Markdown作为文档。这里有个思路很清晰的md文档[API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md)

有文艺型，通过Hexo等静态文件生成器，把Markdown文档转换为HTML。然后部署到``gh-pages``。

有懒人型，使用``docsify``动态解析Markdown文件，放在项目的docs目录下，然后渲染。

当然文档不是必须的，如果简单明了的源码或者IDE提示，那么就不需要文档。

有些时候增加文档，反而增加了维护文档的成本。

### 最后

这是我的根项目[github.com/axetroy/Github](https://github.com/axetroy/github)

里面基本上包含了上面的功能，没创建一个新仓库，都是从这里面clone更改的，避免重复创建文件。

也建议各位这样做，保持良好的仓库编辑习惯。