lerna項目中集成husky、lint-staged、commitlint和cz-customizable

Monorepo 是針對單倉庫、多 package 的流行解決方案, lerna 是它的一種實現。

說明

重要package版本說明：

• "husky": "^6.0.0"
• "lint-staged": "^10.5.4"
• "@commitlint/cli": "^12.0.1"
• "@commitlint/config-conventional": "^12.0.1"
• "cz-customizable": "^6.3.0"

配置husky

在lerna項目根目錄中安裝husky:

yarn add husky -D
複製代碼

注意：husky v4和v6版本的配置方式截然不同，這裏只介紹v6版本的配置方式，v4的網上一搜一大把，這裏不過多介紹

1. 在package.json的scripts中添加"prepare": "husky install"，並運行這條命令：

npm set-script prepare "husky install" && npm run prepare
複製代碼

2. 添加一個hook:

npx husky add .husky/pre-commit "npm test"
複製代碼

上面這個命令會在.husky目錄下新建一個pre-commit文件，其內容以下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

複製代碼

以上都是手動安裝husky的過程，固然官方也提供了一鍵安裝和配置腳本，推薦使用：

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2
複製代碼

若是使用的是v4版本的husky，想升級到v6，可使用如下命名，一鍵遷移：

// npm
npm install husky@6 --save-dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
  
// yarn 1
yarn add husky@6 --dev \
  && npx husky-init \
  && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config

// yarn 2
yarn add husky@6 --dev \
  && yarn dlx husky-init --yarn2 \
  && npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
複製代碼

更多配置，詳見官方文檔：typicode.github.io/husky/#/

配置lint-staged

在lerna項目中，因爲全部子項目公用一個 repo 源代碼倉庫，所以它的 husky 鉤子只能創建在最頂層目錄；

而每次 commit 都頗有多是多個子項目都有改動，這個時候使用 lint-staged 時，就不但要區分文件類型，還要區分改動文件所在的子項目（由於不一樣的子項目可能會有不一樣的校驗處理）。

這時，咱們可使用 lerna 命令來實現對「哪一個子項目有修改」的判斷；而 lint-staged 就須要安裝在任何一個須要作校驗的子項目中。

1. 添加或修改.husky目錄下的pre-commit鉤子以下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

lerna run --concurrency 1 --stream precommit --since HEAD --exclude-dependents

複製代碼

其中，precommit 是在pre-commit鉤子中觸發的子項目的命令

2. 在子項目中安裝和配置lint-staged，並添加precommit命令

• 安裝lint-staged：

lerna add lint-staged --scope=xxxx -D
複製代碼

• 在添加precommit命令：

"precommit": "lint-staged"
複製代碼

• 配置lint-staged：

"lint-staged": {
  "*.{ts,tsx,js,jsx}": [
    "eslint"
  ]
},
複製代碼

更多配置，詳見官方文檔：github.com/okonet/lint…

配置commitlint和cz-customizable

每一個團隊對提交的commit message格式有約定俗稱的要求，可是沒有一個統一的規範，致使你們提交的commit message或多或少不太同樣。所以，須要一個工具來幫助你們統一commit message的格式，也方便後續的分析和拓展。

cz-customizable是一個幫助書寫commit message的工具，而commitlint是一個校驗commit message的工具。

1. 安裝commitlint和cz-customizable:

yarn add @commitlint/cli @commitlint/config-conventional cz-customizable -D
複製代碼

2. 添加commit-msg鉤子

npx husky add .husky/commit-msg "yarn commitlint --edit"
複製代碼

生成以下文件：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn commitlint --edit 
複製代碼

3. 在package.json中添加如下配置：

{
  ...
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": "./.cz-config.js"
    }
  },
  ...
}
複製代碼

4. 在項目根目錄中新建.cz-config.js文件，內容以下：

module.exports = {
  types: [
    { value: 'feat', name: 'feat: A new feature' },
    { value: 'fix', name: 'fix: A bug fix' },
    {
      value: 'style',
      name:
        'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)',
    },
    {
      value: 'refactor',
      name:
        'refactor: A code change that neither fixes a bug nor adds a feature',
    },
    { value: 'revert', name: 'revert: Revert to a commit' },
    {
      value: 'chore',
      name:
        'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation',
    },
    { value: 'docs', name: 'docs: Documentation only changes' },
    {
      value: 'perf',
      name: 'perf: A code change that improves performance',
    },
    { value: 'test', name: 'test: Adding missing tests' },
  ],

  scopes: [
    { name: 'frontend' },
    { name: 'backend' },
    { name: 'service' },
  ],

  messages: {
    type: "Select the type of change that you're committing:",
    scope: "\n Select the scope of change that you're committing:",
    // used if allowCustomScopes is true
    customScope: 'Denote the custom scope:',
    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
    body:
      'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
    breaking: 'List any BREAKING CHANGES (optional):\n',
    footer:
      'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
    confirmCommit: 'Are you sure you want to proceed with the commit above?',
  },

  allowCustomScopes: true,
}

複製代碼

5. 在項目根目錄中新建.commitlintrc.js文件，內容以下：

const typeEnum = require('./.cz-config');

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', typeEnum.types.map((i) => i.value)],
    'scope-enum': [2, 'always', typeEnum.scopes.map((i) => i.name)],
    'scope-empty': [2, 'never'],
  },
};

複製代碼

配置完成後，每次提交commit時，可使用git cz替換git commit命令，從而輔助咱們更加規範的書寫commit message。

更多詳細配置，能夠參考這篇文章：juejin.cn/post/684490…

總結

以上就是我對如何在lerna項目中配置husky、lint-staged和Cz工具的一些粗略認知，固然不單單是lerna項目，也適用於任何前端項目。

連接

• husky官文文檔

• lint-staged官方文檔

• Cz工具集使用介紹