js打印插件_使用 Nodejs 开发一个 commitlint-release 插件

本文使用 Zhihu On VSCode 创作并发布

前言： 上次动手开发了一个插件，在 React 中：如何把 CSS 变量全局化，完成这个插件，让我学习了 npm 简单的开发流程，这次在尝试开发一个 commitlint-release 插件，我对开发插件有了更加进一步的了解了，比如如何创建 bin 命令，如何使用 NodeJs 执行命令，如何在 REPL 环境打印出带颜色友好提示等。开发一个简单的插件，我想对我来讲差不多够用的了，莫的没必要去研究那么深。

目的

主要是解决多人协作时代码风格不一致的问题顺便规范下 commit 提交。

在平时，如果是我们自己一个人开发项目，那当然是自己怎么爽怎么来，不要给我讲什么是规范，我就是规范。但是一旦项目涉及到多人协作或有外包同事的话，情况就不一样了，这时候的代码规范和风格保持一致就是一件特别重要的事情，即使对方是一位优秀的工程师。可以讲代码的规范性的重要性丝毫不亚于业务逻辑的实现。

当然社区对这方面给出了很多解决方案，也就是插件，但是需要一个一个的去集成，换个项目又的动手自己复制，多麻烦呀。对于这种类似 CLI 脚手架的工具，最好是做成 npm 包，非常便于携带呦，还能学到新知识，多好的事情呀。

插件在此：commitlint-release

灵感来源

我在去配置代码规范的时候并没有想到去做一个 npm 包，直到我发现一个小姐姐写的插件：vue-cli-plugin-commitlint-release

写的可以说是非常的棒，就是可惜只支持 Vue 环境，所以如果我要是开发 React 或 Node 的就尴尬了。非常建议看看这个插件源代码，也很简单的，你可以照着插件开发指南来学习下 @vue/cli 插件的开发技巧，不说为了学习技术就是为了面试多要点工资，也得看看呀，对吧。

既然不能直接使用，那就只能自己搞了，而且我还有点新功能要加进去，看下思路：

不依赖 Vue 或 React 框架的 API 来实现要不然不通用，依据 NodeJs 的 API 来完成
添加代码格式化方面的功能

前置知识

我们对着 commitlint-release 要实现的功能来一个一个学习，先看下 commitlint-release 有哪些功能：

自动检测 commit message 是否符合规范，不规范不允许提交
自动提示 commit message 填写格式，不怕忘记规范怎么写。
自动更新 package.json 里的版本号。
自动生成 changelog，更好的维护版本迭代。
集成 git add . && git commit 不需要在执行两个命令，配合 shelljs 这个 npm 包能更强大。
自动格式化代码。

commit message

功能一和二都属于 commit 提交规范的事情，即使用使用 husky 和 commitlint 规范提交记录配置使用也很简单，首先安装依赖：

npm

依据 husky 官网介绍在 package.json 文件添加 husky 字段，用来拦截 git commit 命令：

"husky"

然后在根据 @commitlint/config-conventional 的 Getting started 来使用命令行，来创建 commitlint.config.js 文件：

echo

配置完了，这时如果我们做一个 commit 提交动作，husky 会先拦截，然后通过 @commitlint/cli 来获取 @commitlint/config-conventional 的规则集来验证，验证通过即自动完成本次提交。

另外，关于验证的规则集，你也可以不使用 @commitlint/config-conventional 这个包。自己看下规则，自定义也行，但是我认为没多大必要。

假如你是个新手或忘记了 commit 的规范怎么写。这时有个自动提示 commit message 填写格式就好了。 commitizen 的 git-cz 或 cz 命令就是用来干这个的。先安装 commitizen 依赖：

npm i -D commitizen

然后再 package.json 文件的 scripts 字段添加以下内容：

"scripts"

这时通过 npm run cz 或 npm run git-cz 就能调出 commit 的提示功能了。

生成 CHANGELOG.md

接着看，很多开源的项目都有一个 CHANGELOG.md 文件，这个文件便于更加方便的维护版本迭代。那它是怎么自动生成的呢。

cz-conventional-changelog 这个包是生成 angular 规范的 CHANGELOG.md。如果你想自定义 CHANGELOG.md 的格式请使用 conventional-changelog 这个包来实现，然后在配合 --config 就行了。

可以去看看阮老师的文章 Commit message 和 Change log 编写指南不仅包含了如何生成 CHANGELOG.md，还包含 Commit message 提价规范的讲解。

版本升级

关于版本升级最常用的就是 npm version major | minor | patch，但是不够只能，这里使用 standard-version 来替代下。其实替不替代也没啥用。

输入命令后，提示输入 [ major | minor | patch ]，以当前版本 1.0.0 为例：

升级版本一定要符合：semver 语义化版本控制规范，例如：

major：主版本号，当你做了不兼容的 API 修改。这时候的 version 应该为 2.0.0。 minor：次版本号，当你做了向下兼容的功能性新增。这时候的 version 应该为 1.1.0。 patch：修订号，当你做了向下兼容的问题修正。这时候的 version 应该为 1.0.1。

ESLint、prettier、editorconfig

editorconfig 主要是保证文件编码、换行等在不同的设备保持一致
ESLint 代码风格和语法检查
prettier 格式化代码

主要讲下有 ESLint 为什么还要使用 prettier，这是因为

ESlint 并不能完全修复代码风格
配置规则过多

prettier 有一套固定的格式话代码规则，但是这些规则大部分都不可以给我们自定义，只有灰常少的一小部分可以自己配置，可以配置的规则在此 Options ，虽然 prettier 格式化规则表现的较为霸道，但是格式化完还是很好看的，所以多人协作在保证团队代码风格一致，牺牲一点个人写代码的风格还是可以接受的，既然 prettier 负责代码风格，那么现在 ESlint，就主要用来检查代码质量（例如变量未定义不允许使用等），和补充 prettier 没有照顾到的代码风格（补充的千万不能和 prettier 规则冲突）（例如：注释和代码不能在同一行）。

npm 相关的知识

看我插件的使用介绍会发现：

npm i commitlint-release -D
执行 npx init-commitlint 命令来初始化配置npx init-commitlint

安装之后需要通过 npx init-commitlint 来初始化配置。init-commitlint 这个命令是怎么来的呢？没错，是通过 package.json 的 bin 字段自动生成的。具体看此记一次nodejs开发CLI的过程

npm 的知识还是很重的，推荐一个博客：Node.js 进阶-你应该知道的 npm 知识都在这！这个博客还是少些东西，我知道有个博客内容恰好能和它互补，可惜忘了。。。

简单介绍下 commitlint-release 的开发

先根据 NodeJS 的规范建项目目录，简单讲下我的目录：

# 此包被引入时的入口
├── bin/

最最重要的就是 bin/init.js 文件，里面的 API 简单介绍下：

process.argv 来获取进程被启动时传入的命令行参数process.argv
process.cwd() 方法会返回 Node.js 进程的当前工作目录。
process.exit() 方法以退出状态 code 指示 Node.js 同步地终止进程。
createReadStream 和 createWriteStream，文件模块创建读取流和写入流，就是用 JS 读取文件和写入文件
spawn 开启一个子进程来执行 shell 命令，也可以用 shelljs 这个 npm 包
chalk 可以用来给文字上色
path 和 __dirname 都是文件路径模块的

耐下性子来仔细研究研究，以后项目中遇到需要去看 node_modules 或研究源码的时候很有帮助的。

最后

对了，今天是十月二十四号，还想不起来什么吗？我在提示下 1024 ，这下知道了吧，没错你答对了，是程序员节，很多人（我想大多数都是程序员自己讲的）都说程序员累，我是真想不明白，天天玩个电脑有啥累的，而且为什么会有程序员节，还不是上班没事划个水在网上冲浪 ‍♀️，吐槽吐槽自己如何辛苦，就是闲着没事在网上硬给创造出来一个节日。要说辛苦送外卖的不辛苦吗，妈蛋，不仅是辛苦还有生命危险⚠️，尤其是冬天，也没见外卖员天天在网上喊辛苦，你都无法想象一个站点模范外卖员到底有多拼，对比程序员那点加班和大小周啥的，对外卖员的工作时间来讲完全就是洒洒水级别的。

当然今天这个节日还是有点用的，毕竟老板发了红包，我就抢了二十三块钱，不错了省一顿饭，就是这么没出息

当前时间 Saturday, October 24, 2020 18:31:31 北京办公室