GitHub 和 Travis CI

持续集成与协作

本课程的一个反复出现的主题是自动化对提升工作流的强大作用。当正确应用时，ESLint 和 Jest 等工具能极大提高你在代码进入生产环境之前发现错误的可能性。当你作为团队一员工作或维护开源项目时，如何将自动化的威力扩展到你的合作者身上？

一个简单的答案是传统的文档说明：“请在提交补丁前运行测试。”但这仍然为人为失误留下了空间。更好的解决方案是将这类质量控制检查交给服务器来完成，从而脱离开发者个人开发环境的限制。这种技术被称为持续集成（CI）。

持续集成通过将你原本需要亲自承担的任务自动化，减轻了项目维护者的负担。CI 服务器不仅能告诉潜在贡献者他们的补丁是否通过项目的测试，还能展示这些更改对测试覆盖率、编译后资源大小以及其他你关心的指标的影响。

引入 CI 服务器是项目自动化的坚实第一步。你可以进一步在贡献者的开发流程中添加脚本，并提供供开发者实时体验的交互式文档。花时间搭建这些支持工具，将使项目的要求对潜在贡献者变得清晰明了，同时简化审查他们补丁的过程。

在本章中，你将学习如何设置流行的 Travis CI 服务，以运行 test-driven-carousel 项目的测试。你还将学习如何使用 Husky 为项目添加 Git 钩子，在代码提交前进行检查，尽早发现潜在问题。最后，你将使用 Storybook 为轮播组件生成美观且可交互的文档。

设置 Travis CI

Travis CI 是一种广受欢迎的持续集成服务，近年来因其便捷性和灵活性而迅速普及。Travis 可以在你或合作者每次推送更改时自动运行项目的脚本，并通过 GitHub 的“拉取请求”界面报告结果。每次运行都在独立隔离的环境中进行，因此结果比在开发者个人机器上的环境更加可靠。

本节将引导你完成授权 Travis CI 访问你的项目的过程，让你能够将测试和其他自动化任务交由云端处理。整个过程非常快速：你只需将项目上传至 GitHub，授权 Travis 访问，然后添加一个配置文件，告诉 Travis 运行项目的测试。最后，你还可以添加一个“徽章”，向世界展示你的项目在 Travis CI 上测试通过的状态。

将项目托管在 GitHub 上

Travis CI 是专为 GitHub 设计的扩展，而 GitHub 是目前最主流的源代码托管平台。如果你还没有 GitHub 账号，现在正是创建账号的好时机。登录后，为你的 test-driven-carousel 项目创建一个新的仓库。务必将其设为公开仓库，因为 Travis CI 对公开的开源项目免费。你可以忽略其他所有选项，如下图所示：

仓库创建完成后，GitHub 会显示一些用于推送现有 Git 仓库的命令行指令。请将这些指令复制并粘贴到上一章中的 test-driven-carousel 项目目录下：

1$ git remote add origin git@github.com:TrevorBurnham/test-driven-carousel.git
2$ git push -u origin master
3Enumerating objects: 133, done.
4Counting objects: 100% (133/133), done.
5Delta compression using up to 8 threads
6Compressing objects: 100% (130/130), done.
7Writing objects: 100% (133/133), 289.48 KiB | 6.58 MiB/s, done.
8Total 133 (delta 64), reused 0 (delta 0)
9remote: Resolving deltas: 100% (64/64), done.
10To github.com:TrevorBurnham/test-driven-carousel.git
11 * [new branch]      master -> master
12Branch 'master' set up to track remote branch 'master' from 'origin'.

祝贺！你的项目现已托管在 GitHub 上。默认情况下，这意味着任何对项目感兴趣的人都不仅可以下载副本，还可以通过提交 拉取请求 来提出修改建议。当有人这样做时，你希望知道你的测试是否能通过他们提出的变更。这正是 Travis CI 发挥作用的地方。

请先设置 GitHub 仓库，然后在终端中执行以下命令推送代码：

1. 首先运行 git config --global user.email "you@example.com"，替换为你自己的邮箱
2. git init
3. git add .
4. git commit -m "first commit"
5. git branch -M main
6. git remote add origin https://github.com/username/repository.git，替换为你自己的仓库链接
7. git push -u origin main 系统还会提示你输入 GitHub 账户凭证