使用 Git Hooks 设置 React 以在推送代码之前自动进行测试和 Lint

在我的软件开发生涯中，我越来越关注的一个话题就是质量！或许我已经被坑太多次了。唉，我决定用这个husky包测试一下如何在 React 项目中添加 Git Hooks。我的目标是在提交代码或推送到 Git 仓库之前，必须先运行eslintLinter 和测试套件。这篇文章的代码仓库可以在这里jest找到。

从头开始设置

从头开始设置其实相当简单。我先用 boostapping 开始create-react-app。

create-react-app fun-with-git-hooks
cd fun-with-git-hooks

接下来，我安装了husky，它号称是“简化 git hooks 的利器”。（没错！）由于它只在开发环境中需要，所以只需将其安装为开发依赖项即可。

npm install husky --save-dev

实际上，我们最终需要一个名为的附加开发依赖项cross-env，它将允许我们在当前所处的任何环境中配置 CI 环境变量。

npm install cross-env --save-dev

最后，让我们对package.json文件进行一些修改以完成一些事情：

• 重新配置jest测试以在持续集成模式下运行
• 添加 linting 命令（我们不需要eslint单独安装，因为它会自动引导create-react-app）
• 配置我们的husky钩子首先进行 lint，然后进行测试

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "cross-env CI=true react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint src"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm test",
    "pre-push": "npm run lint && npm test"
  }
}

就这样！现在，无论何时尝试提交或推送代码，如果 linting 或测试失败，您将无法执行此操作。

品质取胜！

烦恼的权衡

诚然，强制在每次提交（甚至每次推送）之前通过测试可能会严重阻碍你的工作流程，因此不值得。没关系！重要的是，你应该找到最适合你的配置。就我目前的项目而言，我会确保在每次推送之前进行 linting 测试，然后由持续集成服务器运行自动化测试，而不会阻塞 git 提交或推送。找到最适合你的配置吧！