npm script 應用在 git hooks 中

一個項目每每不僅一我的開發，多人合做天然須要版本控制來合理管理代碼，好比 git、svn 等。我的喜歡 git，以及直男社區 github。git 除了能管理代碼版本，還能夠在 npm script 裏運用，否則我也不會在這囉嗦那麼多作鋪墊了。git 在 npm script 的運用主要體如今 pre 和 post 的鉤子上，也就是你們熟知的 git hooks，能幫助咱們在代碼提交（commit）和獲取時（push）作一些事情。

說說場景

• 本地倉庫配置 pre-commit 和 pre-push，是給要提交的代碼作檢查；
• 遠程倉庫配置 pre-receive，是給拉取下來的代碼作檢查，以確保符合本地代碼規範，假如沒有這步，本地開發者偷懶使用 --no-verify（或-n）就能夠規避本地代碼檢查；

注：有些懶能夠偷，有些不能夠。有些懶，雖一時方便了本身，但長遠來看，不只是坑了本身，更是坑了整個團隊。

全面檢查

全面檢查，就是對匹配文件的全量遍歷。

前端社區中 npm script 結合 git-hooks 的方案，我的仍是喜歡 husky，就是好用嘛，並且還支持跟多的 git hooks 工具，好比後面要說的 lint-staged。還等什麼 =>

安裝依賴包

npm install husky -D
// 或
yarn add husky -D
複製代碼

編寫

{   
    "scripts": {
        "lint:js": "# 檢查 js \n eslint ./src/**/*.js",
        "test": "# 單元測試 \n cross-env NODE_ENV=test mocha tests/"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint:js",
            "pre-push": "npm run test"
        }
    },
}
複製代碼

剖析

1.安裝依賴包 husky 後，可查看 .git/hooks 目錄，都是 husky 的鉤子

執行

1.代碼開發完畢，準備提交到本地倉庫

git commit -am "git hooks 的使用"
複製代碼

此時會調用 pre-commit，發現錯誤：

2.解決了有錯誤的 request.js 問題，提交到遠程分支上，又發現單元測試環節出現了問題：

3.解決單元測試錯誤就能提交到遠程分支倉庫了

搭載 lint-staged 讓你飛

以上基本實現咱們所須要的，可是...現實的狀況是，有些場景咱們會接手他人項目，若是按上面步驟走，每次提交代碼就會檢查全部代碼（上面例子只檢查 js 的代碼）就會發現有 n 個文件有警告或錯誤（成百上幾個），瞬間處於崩潰邊緣，想重構或跑路節奏。

lint-staged 固然就是幫助咱們解決這類場景問題的，加上 prettier 如虎添翼。

安裝依賴包

npm install lint-staged prettier -D
// 或
yarn add lint-staged prettier -D
複製代碼

編寫

{
    "scripts": {
        "lint:js": "# 檢查 js \n eslint ./src/**/*.js",
        "test": "# 單元測試 \n cross-env NODE_ENV=test mocha tests/"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged",
            "pre-push": "npm run test"
        }
    },
    "lint-staged": {
        "linters": {
            "src/**/*.js": [
                "prettier --tab-width 4 --write",
                "eslint --fix",
                "git add"
            ],
            "src/**/*.{css, less}": [
                "prettier --tab-width 4 --write",
                "stylelint --fix",
                "git add"
            ]
        },
        "ignore": [
            "**/dist/*.min.js"
        ]
    }
}

複製代碼

剖析

• lint-staged 是一個前端文件過濾工具，不會格式化任何東西，沒有代碼規則配置文件，須要本身配置；
• lint-staged 它的做用是指檢查當前改動的文件（或者說當次要提交到本地倉庫的文件）;
• pre-commit 鉤子啓動會執行 lint-staged 命令，而後對本次 commited 中的全部 .js 和 .{less, css} 文件執行 exlint --fix 、 stylelint --fix 和 git add;
• prettier 代碼格式優化，它能優化 js, jsx, ts, css, less, scss, json, md, ...，保證團隊代碼風格是至關有用的。

若是，你嫌lint-staged 寫在 package.json 臃腫，能夠抽取出來放到 .lintstagedrc 中：

{
    "linters": {
      "src/**/*.js": [
        "prettier --tab-width 4 --write",
        "eslint --fix",
        "git add"
      ],
      "src/**/*.{css, less}": [
        "prettier --tab-width 4 --write",
        "stylelint --fix",
        "git add"
      ]
    },
    "ignore": [
      "**/dist/*.min.js"
    ]
}
複製代碼

執行

git commit -am "本次提交解釋說明"
複製代碼

假如 src/utils 目錄下有 request.js 和 index.js 兩個文件，其中兩個文件代碼都有錯誤，可是 index.js 是別人寫的，屬於歷史版本（以前怎麼提交到倉庫或許是由於沒作檢查或者跳過檢查了吧）。本次其實只改動了 request.js 文件，若是按照前面步驟，就會檢查出兩個文件都有問題，而這又不是咱們想要的，由於 index.js 文件不是我寫的，裏面的代碼很差改動（業務邏輯和功能邏輯不明白），這個時候，lint-staged 的價值就提現出來了，只報出 request.js 文件的錯誤（知我者）：

多幾句嘴

如今能夠在你的項目中應用起來了，還等什麼！！！

你能夠...

上一篇：npm script 複雜場景的應用

下一篇：npm script 的實踐

目錄：npm script 小書