Git钩子

一、背景：我们（atom项目）遇到了什么问题？

        vue的脚手架工具(vue-cli)默认会给我们配置好了很多功能，比如eslint。也提供了git钩子支持（vue-cli搭建的项目默认做了这样的事情，在你提交代码时，会走eslint的语法检测）。

        但是由于laravel框架对于vue的支持不友好。我们不得不抛弃vue-cli中的vue-cli-service（vue-cli-service：包括启动服务，构建项目，语法检测等功能）。说做就做，开始laravel支持vue的工作。一切技术支持: 付老师。期间踩了不少的坑，比如：1. 浏览器看不到源文件，难以代码调试；2. tslint新版本执行lint时不去检测ts的语法错误；3. 没有pre-commit(git提交钩子)，很容易提交错误代码； 4. 前后端项目没有分离，php代码不期望走tslint的代码检测。(由于时间太长，部分问题和细节已经不记得)

        为什么要使用git钩子呢，难道不使用不行吗? git钩子其实是非必要的东西。 只要我们都在提交代码前，看一看tslint是否报错就可以了。 git钩子似乎也没有什么用吗。实时上不是每一个人都能严格执行提交代码前的检查操作的。特别是我这种懒人，重来都不看tslint的报错。直接commit 后就push了。会导致什么问题呢？对于atom项目而言，如果有tslint的错误，就直接报错，编译停止，上线就会失败。就会导致： 逢上线必挂，逢上线必须改代码。而且我写代码，不怎么写分号的，是不是特别懒。针对这一类问题（空格，对齐等），tslint是能够自动修复的。

        到此，背景交代完毕了，以下步入正题：如何使用git钩子来克服这些问题。

二、git钩子的使用：

1. 方案一：最原始的方案；

    直接修改 .git/hooks目录下的文件，这里以pre-commit和pre-push为例

    （1）创建一个可执行的文件preCommitRun.js,写入执行脚本，如：

        console.log('hello pre-commit');

    （2）在“/项目名/.git/hooks/pre-commit”文件里写入要执行的命令， 如：

        node preCommitRun.js

    （3）pre-push代码推送钩子的构建如上

2.方案二：借助husky，pre-commit等工具，这里以husky为例

参考：https://zhuanlan.zhihu.com/p/35913229

        https://github.com/typicode/husky

husky做了什么？

        通过查看源码可以看到，在安装 husky 的时候，husky会根据 package.json里的配置，在.git/hooks 目录生成所有的 hook 脚本（如果你已经自定义了一个hook脚本，husky不会覆盖它）

3. 方案三：使用脚本生成.git/hooks目录下钩子文件。

    实现思路如下：

    （1）在项目根目录下创建gitHooks目录，用于存放需要修改的钩子文件

    （2）在gitHooks目录创建并编辑git钩子文件，比如pre-commit和pre-push文件

    （3）编写脚本：将gitHooks目录下的所有文件复制到.git/hooks目录下，并赋予可执行权限

    （4）执行脚本：（如node initGithooks.js）

能想到的方案导致就是以上三种，接下来分析一下各种方案的优缺点：

    方案一：

        优点：简单，直观，很稳定（git提供）

        缺点：.git目录是被git忽略的，git钩子文件的配置也就无法上传，很难做到统一性。

方案二：    

        优点：配置很方便，会被git同步，开发者的代码风格很容易统一

        缺点：一致性不能保证（如上：自己编辑的钩子文件不会被覆盖）除此之外，似乎没有什么缺点了吧。但是在atom这种前后端代码混在一起的项目，有个重大缺陷就是：后端开发成员几乎不会修改前端项目，但是每次让他们做代码的检查，很是浪费时间，尤其使用落后的node运行环境来做ts的编译时，非常缓慢。

方案三：

    优点：灵活（可严格，可不严格），配置很方便，会被git同步，不会浪费其他开发者代码提交的时间，一致性能够保证

    缺点：需要通知前端开发者运行一次脚本，比较麻烦，而且很容易忘记说明。