前端开源项目规范化实践

多人协作项目及开源项目，制定团队协作规范十分重要，本篇将从项目 eslint 代码规范、单元测试、持续集成、commit 规范等方面的实践做一些总结。

eslint 篇

eslint 对多人协作项目配置规范化特别重要。

安装 eslint

执行如下指令，安装 eslint 并初始化：

perl 复制代码

# 安装 eslint
npm install eslint -D

# 初始化
npx eslint --init

如果要配合 typescript 使用，提前安装 typescript(如不使用 typescript 可忽略此步)：

js 复制代码

npm install typescript -D

忽略部分文件的 eslint 检测

创建 .eslintignore 文件，可配置某些文件忽略 eslint 的检测，例如：

bash 复制代码

src/test.js

集成 prettier

安装如下几个包：

arduino 复制代码

npm install prettier eslint-plugin-prettier eslint-config-prettier -D

在 .eslintrc.js 中添加 plugin:prettier/recommended 并且添加 prettier 的 rules:

js 复制代码

module.exports = {
  // ...
  extends: ['plugin:prettier/recommended'],  // 要放在 estends 数组的最后一项
  rules: {
    'prettier/prettier': 'error',
    // ...
  },
  // ...
};

然后在根目录新建 .prettierrc 里面配置自己的 prettier 规则，例如：

json 复制代码

{
  "singleQuote": true,
  "semi": true,
  "endOfLine": "auto",
  "tabWidth": 2,
  "printWidth": 80
}

集成 husky 和 githook

安装 lint-staged

复制代码

npm install lint-staged -D

指定 lint-staged 只对暂存区的文件进行检查，在 package.json 中新增如下内容：

json 复制代码

{
  // ...
  "lint-staged": {
    "**/*.{jsx,txs,ts,js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }
}

集成 husky，新版本(v7) 的 husky 通过如下方式集成：

perl 复制代码

# 安装 husky
npm install husky -D

# husky 初始化，创建 .husky 目录并指定该目录为 git hooks 所在的目录
npx husky install

# 指定 husky 在 commit 之前运行 lint-staged 来检查代码
npx husky add .husky/pre-commit "npx lint-staged"

由于 husky 是装在本地的，在 package.json 中新增如下指令，项目安装依赖时同时预装 husky:

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "prepare": "npx husky install"
  },
  // ...
}

配合 vscode

vscode 安装 eslint 插件，让我们在编写代码时就能够进行错误提示：

测试篇

单元测试

安装测试库

执行如下命令，安装测试库 mocha + 断言库 chai：

perl 复制代码

npm install mocha chai -D

编写测试用例

要测试如下 src/index.js 中的内容：

js 复制代码

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

module.exports.add = add;
module.exports.sub = sub;

新建 test/index.test.js 测试文件，编写如下测试用例：

js 复制代码

const { add, sub } = require('../src/index');
const expect = require('chai').expect;

describe('测试', function () {
  it('加法', function () {
    const result = add(2, 3);
    expect(result).to.be.equal(5);
  });

  it('减法', function () {
    const result = sub(2, 3);
    expect(result).to.be.equal(-1);
  });
});

执行测试命令

在 package.json 文件中新增如下 test 命令：

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "test": "node_modules/mocha/bin/_mocha"
  },
  // ...
}

执行 npm run test，即可看到测试执行结果：

增加测试覆盖率

执行如下命令，安装 istanbul：

复制代码

npm install istanbul -D

在 package.json 中增加如下指令：

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "test": "node_modules/mocha/bin/_mocha",
    "test:cover": "istanbul cover node_modules/mocha/bin/_mocha"
  },
  // ...
}

执行 npm run test:cover，即可看到测试覆盖率：

覆盖率说明：

语句覆盖率（Statements）：是否每个语句都执行了
分支覆盖率（Branchs）：是否每个 if 代码块都执行了
函数覆盖率（Functions）：是否每个函数都调用了
行覆盖率（Lines）：是否每一行都执行了

规范 commit & 自动生成 changelog

良好的 commit 能够帮助我们更好维护代码以及提高 code review 的效率。

commit 准则

大多数团队都会通过在 commit 最前面加上一个 tag 的方式来快速区分 commit 类型：

feat: 新功能特性
fix: 修复问题
refactor: 代码重构，没有新增功能或者修复问题
docs: 仅修改了文档
style: 代码格式修改，如增加空格，修改单双引号等
test: 测试用例修改
chore: 改变构建流程、增加依赖库或者工具等
revert: 回滚上一个版本
ci：ci 流程修改
perf: 体验、性能优化

使用 git-cz 规范 commit

执行以下命令，安装 commitizen 和 cz-conventional-changelog:

perl 复制代码

npm install commitizen cz-conventional-changelog -D

修改 package.json 文件，新增以下内容：

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  // ...
}

执行 npm run commit 命令，即可自动进行规范化提交：

自动生成 changelog

执行如下命令安装 conventional-changelog-cli：

复制代码

npm install conventional-changelog-cli -D

在 package.json 中新增如下内容：

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "genlog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }
  // ...
}

执行 npm run genlog 命令，会自动在 CHANGELOG.md 文件中增加 commit 的信息：