打造个人or团队适用的开源项目规范
lerna
Lerna 是一个用来优化托管在gitnpm上的多package代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目,从而解决了多个包互相依赖,且发布时需要手动维护多个包的问题。
lerna的文件树:
my-lerna-repo/
package.json
packages/
package-1/
package.json
package-2/
package.json
首先作为项目拥有者全局安装:
$ npm install -g lerna
# or
$ yarn global add lerna
init
在项目使用以下命令:
$ lerna init
# or
$ lerna init --independent
这条命令要注意的是,lerna提供两类管理项目的模式:
fixed/locked mode(default)
- Fixed模式下,项目通过单一的版本进行控制。版本号放在项目根目录下的lerna.json文件的version这个字段。当你执行 lerna publish,如果有文件更新,它将发布新的版本。
independent mode(—independent)
- 这种模式下,项目里的各个package独立维护自己的version,它将会忽略lerna.json中定义的version
publish
$ lerna publish
Publish它做了以下几件事情
- 发布项目里的每个模块
- 执行lerna updated确定是否需要发布
- 假如需要发布 给lerna.json 版本号做自增
- 更新package.json里的版本号至最新
- 为新版本更新dependencies
- 为新版本创建一个git commit 和tag
- 发布更新项目到npm
- 一次发布所有packages
只有你在package.json
里设置private: true
这个包则不会被发布。
配置
如果我们使用yarn我们可以在lerna.json
做如下配置:
{
...
"npmClient": "yarn"
...
}
代码检查和规范
在一个项目中,多人开发时会遇到代码格式问题。
解决方案:
使用Eslint
项目拥有者需要全局安装:
$ npm install eslint -g
# or
$ yarn global add eslint
在项目中执行命令:
$ eslint --init
React项目推荐使用airbnb规范。
{
"devDependencies": {
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-jsx-a11y": "^6.1.1"
}
}
使用Standard
参考中文文档 standard/README-zhcn.md at master · standard/standard · GitHub
Prettier
Eslint + prettier 解决了代码风格和格式化的所有问题。
与git hook来解决何时lint
目前比较成熟的是husky
与lint-staged
两者结合:
$ npm install lint-staged husky -D
# or
$ yarn add lint-staged husky -D
接着在package.json
中加入:
"lint-staged": {
"packages/*/src/**/*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
Tslint
如果你的项目使TypeScript
那么tslint
能帮助你许多!
$ yarn add -D prettier tslint-config-prettier tslint-plugin-prettier husky pretty-quick
Tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:latest",
"tslint-react",
"tslint-config-prettier"
],
"jsRules": {},
"rules": {
"prettier": [true, "./.prettierrc"],
"ordered-imports": false,
"object-literal-sort-keys": false
},
"rulesDirectory": [
"tslint-plugin-prettier"
]
}
编辑器的不同
解决方案:
主流的都是使用EditorConfig
只需要在根目录新建一个.editorconfig
文件,然后去根据文档自行定义。再给自己使用的编辑器安装editorConfig
的插件即可。
官方网站:EditorConfig
commit 不统一
主流的方法是commitizen.
项目拥有者应当全局安装:
$ npm install -g commitizen
# or
$ yarn global add commitizen
之后我们在项目里选用angular格式的commit message并在终端下输入以下命令:
$ commitizen init cz-conventional-changelog —save-exact
# or
$ commitizen init cz-conventional-changelog --yarn --dev --exact
上面的命令为你做了三件事:
- 安装cz-conventional-changelog的adapter的npm模块。
- 将其保存到package.json的dependencies或devDependencies。
- 将config.commitizen键添加到package.json的根目录,如下所示:
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
}
然后在package.json
里的scripts
里加上
"scripts": {
"commit": "git-cz"
}
注意:
如果你使用像husky
这样的precommit hooks
,你需要为脚本命名除“commit”之外的其他东西(例如“cm”:“git-cz”)。
原因是因为npm-scripts有一个“feature”,它自动运行名称为prexxx的脚本,其中xxx是另一个脚本的名称。
本质上,如果您将脚本命名为“commit”,则npm和husky将运行两次“precommit”脚本,并且解决方法是阻止npm触发的precommit脚本。
之后如果有别人也参与进你的项目开发中,我们最好在仓库里也安装依赖
$ npm install -D commitizen
# or
$ yarn add commititzen -D
changelog
通过手动去维护changelog在我之前的那个wx-tsApi项目中是非常头疼的一件事情,所以去寻找自动化的东西。
全局安装
$ npm install -g conventional-changelog-cli
# or
$ yarn global add conventional-changelog-cli
然后在package.json
文件中添加scripts
{
"scripts": {
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
}
}
官方推荐的工作流程:
- 做出改变
- 提交这些改变
- 确定Travis变成绿色
- 改version
- changelog
- commit package.json 和CHANGELOG.md文件
- 打Tag
- push
基于lerna的工作流程(自己研究的有不对请指出):
- 做出改变
- git-cz
- “conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md”
- commit CHANGELOG.md 文件
- Git push
- lerna publish
借鉴
eJayYoung(如何打造规范的开源项目)