lerna + monorepo 发布组件库（1）

公司最近在做一个平台类的项目，集成了多种业务，每种业务对应一个前端项目，为了统一规范各个前端项目，引入统一的eslint包，组件库就显得尤为重要。于是决定学着从0到1搭建组件库。选择lerna +  monorepo， 使用 lerna的原因，网上有很多总结，能够链接repo中的各个项目，能够管理从版本管理到发布等等，就不一一列举了。开始一步步搭建吧

1. 安装lerna

npm i -g lerna

2. 创建 my-monorepo-project文件夹，在该目录下运行

lerna init

生成了如下目录：

 3. 在lerna.json中设置 "npmClient": "pnpm"，"version": "independent"，删除node_modules，手动创建pnpm-workspace.yaml文件，运行 pnpm install

packages:
  - "packages/*"

4.  新建packages 子项目

lerna create @xxxx/packageName

5. 发布新增的package， 我是自己通过Verdaccio起了一个本地自己的npm 仓库

npm config set registry=http://localhost:4873/
lerna version
lerna publish from-package

到此一个自己的npm 包发布成功！

6. 组件库必不可少要涉及多人开发，接下来为组件库添加husky，lint-staged，commitlint来规范代码，首先安装husky，commitlint， 和lint-staged

pnpm install husky @commitlint/cli @commitlint/config-conventional lint-staged -D

在package.json中的scripts添加 

"prepare": "husky install"

运行npm run prepare， 生成如下目录

在.husky目录下新增 commit-msg和pre-commit两个git 的钩子，pre-commit中运行pnpm lint-staged， 在commit-msg中运行pnpm commitlint --edit，

并添加lint-staged和commit-msg的配置文件

.lintstagedrc.js

module.exports = {
  '*.{js,ts,jsx,tsx}': ["eslint --rule \"'no-console':'error'\" --fix"],
  '.{ts,tsx}': () => 'tsc --noEmit',
};

.commitlintrc.js

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