Lerna is an implementation of Monorepo, a popular solution for single repository, multiple packages.

instructions

Important Package version description:

  • “Husky” : “^ 6.0.0”
  • “Lint – staged”, “^ 10.5.4”
  • “@ commitlint/cli” : “^ 12.0.1”
  • “@ commitlint/config – but”, “^ 12.0.1”
  • Cz – customizable: “^ 6.3.0”

Configuration husky

Install husky in lerna project root:

yarn add husky -D
Copy the code

Note: Husky V4 and V6 have very different configurations. This is only for V6

  1. inpackage.jsonthescriptsadd"prepare": "husky install"And run this command:
npm set-script prepare "husky install" && npm run prepare
Copy the code
  1. Add a hook:
npx husky add .husky/pre-commit "npm test"
Copy the code

This command creates a new pre-commit file in the. Husky directory, with the following contents:

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

npm test

Copy the code

Husky installation is a manual installation and configuration script.

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2
Copy the code

If you are using version V4 of Husky and want to upgrade to V6, you can use the following naming, one-click migration:

// 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
Copy the code

More configuration, as shown in the official document: typicode. Making. IO # / husky / /

Configuration lint – staged

In lerna, because all subprojects share a repO repository, its Husky hooks can only be built in the topmost directory;

Lint-staged subprojects are more likely to have been changed per COMMIT, so when lint-staged subprojects are used, it is important to distinguish not only the file type but also the subproject in which the modified file is staged (since different subprojects may have different validation procedures).

At this point, we can use lerna command to realize the judgment of “which subitem has modification”; Lint-staged must be installed into any subproject where validation is required.

  1. Add or modify.huskyIn the directorypre-commitThe hooks are as follows:
#! /bin/sh . "$(dirname "$0")/_/husky.sh" lerna run --concurrency 1 --stream precommit --since HEAD --exclude-dependentsCopy the code

Where, precommit is the subproject command that fires in the pre-commit hook

  1. Install and configure in a subprojectlint-stagedAnd addprecommitThe command
  • The installationlint-staged:
lerna add lint-staged --scope=xxxx -D
Copy the code
  • In the addprecommitCommand:
"precommit": "lint-staged"
Copy the code
  • configurationlint-staged:
"lint-staged": {
  "*.{ts,tsx,js,jsx}": [
    "eslint"]},Copy the code

For more configurations, see the official document: github.com/okonet/lint…

Configure COMMITLint and CZ-CustomIZABLE

Each team has a common convention on the format of the commit message submitted, but there is no uniform specification, resulting in more or less different commit messages. Therefore, a tool is needed to help unify the format of the Commit Message and facilitate subsequent analysis and extension.

Cz-customizable is a tool to help write commit messages, and CommitLint is a tool to validate COMMIT messages.

  1. The installationcommitlintandcz-customizable:
yarn add @commitlint/cli @commitlint/config-conventional cz-customizable -D
Copy the code
  1. addcommit-msghook
npx husky add .husky/commit-msg "yarn commitlint --edit"
Copy the code

Generate the following files:

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

yarn commitlint --edit 
Copy the code
  1. inpackage.jsonAdd the following configuration:
{..."config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": "./.cz-config.js"}},... }Copy the code
  1. Create a new one in the project root directory.cz-config.jsFile, as follows:
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,}Copy the code
  1. Create a new one in the project root directory.commitlintrc.jsFile, as follows:
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'],}};Copy the code

After the configuration is complete, you can use git cz to replace the git commit command every time you commit a commit, which helps you write a commit message in a more standardized way.

For more detailed configuration, please refer to this article: juejin.cn/post/684490…

conclusion

This is my rough idea of how to configure Husky, Lint-staged, and Cz tools for lerNA projects, not just LERNA projects, but for any front-end project as well.

link

  • Husky official documentation

  • Lint-staged official documentation

  • Introduction to using the Cz tool set