Github 开源指南

github 上开源一个组件，而且内置到 umi+antd 系列中能够快速的获得更多的反馈，而且能够得到一些 PR 帮助咱们的技术栈快速成长。可是Github 有一套本身的工做流，对于习惯内部系统的咱们仍是有一些上手成本，这篇文章会列举一些工具帮助咱们更好的开始本身的开源生涯，早日成为名望程序员。node

准备工做

GitHub 做为一个中心化的 git 管理平台，须要一个帐号来进行开发和管理本身的仓库。注册号帐号之后就能够 clone 仓库来进行开发了，以 antd 为例咱们可使用 ssh 和 https 两种方式进行开发，这里推荐使用ssh，https 的鉴权比较麻烦，常常会失败。git

咱们能够在 SSH 配置中配置本身的 SSH keys，设置以后就能够完美的支持各类的仓库的 clone，若是仍是想使用 https，推荐使用微软爸爸的提供的 GCMC 解决方案，而且安装 GitHub Desktop 和 VScode 的github 插件， vscode 提供了一个详细的教程来配置咱们的工做流。程序员

为了提高帐号的安全性，咱们推荐打开 GitHub 的两步验证，因为 GitHub 不支持中国大陆的手机，咱们须要使用鉴权 App，这里推荐使用微软 Authenticator 来支持，它能够方便的在国内使用。固然 google play 上还有一系列 APP, 能够自行选择。github

若是咱们须要管理一个仓库，推荐安装 gh ，GitHub 官方出品。web

这里列举几个很是经常使用的命令：npm

// 在浏览器中打开当前的仓库
gh repo view -w

// 用当前的分支提一个pr
gh pr create 

// 查看当前分支提供的 pr
gh pr view -w
复制代码

开发

通常而言 github 的工做流，会先 checkout 一个分支，在分支上开发完成以后，提交一个 PR， Approve 以后就能够就能够 merge 到 master 等待时间发布。ubuntu

名词解释

PR

pull requests 的简称，字面意思是但愿别人 pull 你的代码，是但愿仓库将你的代码合并到仓库中。常见用法：来个 pr ？windows

lssue

字面意思是问题，是 github 提供的用来跟踪 bug 或者需求的工具,提了 issue 通常会异步解决。常见用法：提个 issue 吧浏览器

Collaborator _ 表明是某个仓库的维护人员，若是是某个仓库的 Collaborator 表明你给这个仓库贡献过代码。常见用法：我发现 xxx 有个错别字，正好去蹭个 Collaborator安全

Approve

_ 赞同，做为仓库的全部人赞成了这个 pr以后，就能够点击 Approve 来赞成这个提交，通常要求比较严格的仓库都须要至少一票 Approve 。常见用法：乞讨 Approve 更多名字能够看这里 docs.github.com/cn/github/g…

yarn

如今的多 repo 已经很是多，为了方便的使用，通常会使用 learn+yarn ，yarn 的 workspaces 对多 repo 提供了良好的支持。这里推荐使用 tyarn。能够这样安装 :

npm i yarn tyarn -g
复制代码

工具

Actions

github 提供了不少工具来提高咱们的开发体验，基本上覆盖了咱们全流程的开发任务，咱们能够在 GitHub 上新建任务，管理 issue ，管理版本，发布网站，依托 github 提供的各类功能，咱们能够更流畅的开发。

在开发阶段咱们可使用 github 中咱们可使用 github actions 来新建一个 CI。只要在项目根目录中 .github/workflows 新建一个 xx.yml。这里有个简单的 CI 能够在每次 commit 中发起一个测试。

name: Node CI

on: [push, pull_request]

jobs:
  build:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        node_version: [12.x]
        os: [ubuntu-latest, windows-latest]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node_version }}
      - run: echo ${{github.ref}}
      - run: yarn
      - run: yarn run lint
      - run: yarn run tsc
      - run: yarn run build
      - run: yarn run test
        env:
          CI: true
          PROGRESS: none
          NODE_ENV: test
          NODE_OPTIONS: --max_old_space_size=4096

复制代码

Issue 模板

在 .github 中 ISSUE_TEMPLATE 中新建一个 xxx.md 能够提供一个 issue 的模板。

---
name: '疑问或须要帮助 ❓'
about: 对 Ant Design Pro 使用的疑问或须要帮助
title: '🧐[问题]'
labels: '🧐question'
assignees: ''
--- 
### 🧐 问题描述

<!--
详细地描述问题，让你们都能理解
-->

### 💻 示例代码

<!--
若是你有解决方案，在这里清晰地阐述
-->

### 🚑 其余信息

<!--
如截图等其余信息能够贴在这里
-->

复制代码

Pages

GitHub 上有不少方便的 actions 模板能够轻松使用，例如 rebase 和 github pages，咱们的项目开发到必定阶段时就须要一个网站来进行预览和发布。github 提供了 github pages 来帮助咱们实现功能，它能够支持 https 和自定义域名。咱们通常会经过 CI 来发布 github pages, 这里有一个 actions 能够自动部署 mater 的代码到 github pages。

name: Deploy CI

on: [push]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - run: yarn
      - run: npm run lint
      # - run: yarn run tsc
      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@master
        env:
          CI: true
          GA_KEY: UA-72788897-6
          PROGRESS: none
          GIT_CONFIG_NAME: qixian.cs
          GIT_CONFIG_EMAIL: qixian.cs@outlook.com
          NODE_OPTIONS: --max_old_space_size=4096
          ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: site
          GITHUB_TOKEN: ${{ secrets.ACTION_TOKEN }}
          BRANCH: gh-pages
          FOLDER: 'dist/'
          BUILD_SCRIPT: yarn && npm run site && git checkout . && git clean -df

复制代码

发布网站以后咱们可能须要发布一下版本。这里推荐使用 np 来进行发布，能够减小发布的工做量，它提供了一个交互式的发布工具来帮助咱们发布版本。

更多的工具能够在 antd 的仓库抄一下 github.com/ant-design/…

测试覆盖率

codecov 如今已是事实上的标准，几乎每一个开源库都会接入它。并且它是彻底免费的。接入一个开源项目很是简单，只要一行代码。

bash <(curl -s https://codecov.io/bash)
复制代码

固然你要先去的官网注册一下，umi 也提供了 umi test:coverage 来支持 codecov。

badge

badge 能够快速的展现一些小信息，帮助提高社会地位。

shields.io 支持各类 badge，你也能够自定义一下本身的 badge。

进阶

在进行了初始的开发以后咱们就须要一些自定义之类的高端玩法。

自定义域名

这里推荐在 godaddy 购买域名，在 cloudflare 进行域名申请。咱们只须要在 github 中增长对象 CNAME ，内容为你的域名，而后 cloudflare 简单的配置一下

包发布

npm 的 organizations 能够发布一系列的包，咱们能够在 npm 中找到它。

查看包内容

pkg 能够方便的作到这一点，配合 yarn list 使用效果更佳 unpkg.com/packagename

统计

analytics 是真的方便，谁用谁知道，能够配合 umijs.org/plugins/plu… 一块儿使用。

完整的流程能够查看 procomponents.ant.design/