React组件库搭建流程 （三） -- git规范及npm 发布

前两篇文章介绍了组件库的搭建、自测、代码规范的流程步骤，可以说整个组件库的基础框架已经完成。由于后期可能会是多人协作开发，所以需要commit规范。以及我们如何发布到npm上。

Commit Lint

使用叫pre-commit的git钩子,在调用git commit 命令时自动执行某些脚本检测代码,若检测出错,则阻止commit代码,也就无法push.

yarn add husky lint-staged --dev

package.json

"lint-staged": {
  "src/**/*.ts?(x)": [
    "prettier --write",
    "eslint --fix",
    "git add"
  ],
  "src/**/*.less": [
    "stylelint --syntax less --fix",
    "git add"
  ]
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

当然还要加上 commit mesage规范的校验，添加依赖

yarn add @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog --dev

新建 .commitlintrc.js

module.exports = { extends: ['@commitlint/config-conventional'] };

package.js 继续添加

"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

到这里 pre-commit就配置好了。如果有错，git commit提交时就会提示错误。

npm 发布

npm 发布比较简单，注册npm账号，验证邮箱，注意npm如果配置成淘宝镜像，请切换回初始npm源:

npm config set registry http://registry.npmjs.org/ 

npm登录

npm login

npm 上传

npm publish

出现以上提示就表示npm上传成功了，赶紧下载依赖使用吧。

到此，组件库搭建的流程基础基本完毕，当然内里还有很多细节需要同学们细细摸索。