Github 開源指南

github 上開源一個組件,而且內置到 umi+antd 系列中能夠快速的獲得更多的反饋,而且能夠得到一些 PR 幫助咱們的技術棧快速成長。可是Github 有一套本身的工做流,對於習慣內部系統的咱們仍是有一些上手成本,這篇文章會列舉一些工具幫助咱們更好的開始本身的開源生涯,早日成爲名望程序員。node

準備工做

GitHub 做爲一箇中心化的 git 管理平臺,須要一個帳號來進行開發和管理本身的倉庫。註冊號帳號之後就能夠 clone 倉庫來進行開發了,以 antd 爲例咱們可使用 ssh 和 https 兩種方式進行開發,這裏推薦使用ssh,https 的鑑權比較麻煩,常常會失敗。git

image.png

咱們能夠在 SSH 配置中 配置本身的 SSH keys,設置以後就能夠完美的支持各類的倉庫的 clone,若是仍是想使用 https,推薦使用微軟爸爸的提供的 GCMC 解決方案,而且安裝 GitHub Desktop 和 VScode 的github 插件, vscode 提供了一個詳細的教程來配置咱們的工做流。程序員

image.png

爲了提高帳號的安全性,咱們推薦打開 GitHub 的兩步驗證,因爲 GitHub 不支持中國大陸的手機,咱們須要使用鑑權 App,這裏推薦使用 微軟 Authenticator 來支持,它能夠方便的在國內使用。固然 google play 上還有一系列 APP, 能夠自行選擇。github

若是咱們須要管理一個倉庫,推薦安裝 gh ,GitHub 官方出品。web

84171218-327e7a80-aa40-11ea-8cd1-5177fc2d0e72.png

這裏列舉幾個很是經常使用的命令: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 image.png 更多名字能夠看這裏 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 能夠快速的展現一些小信息,幫助提高社會地位。

image.png

shields.io 支持各類 badge,你也能夠自定義一下本身的 badge。

進階

在進行了初始的開發以後咱們就須要一些自定義之類的高端玩法。

自定義域名

這裏推薦在 godaddy 購買域名,在 cloudflare 進行域名申請。咱們只須要在 github 中增長對象 CNAME ,內容爲你的域名,而後 cloudflare 簡單的配置一下

image.png

包發佈

npm 的 organizations 能夠發佈一系列的包,咱們能夠在 npm 中找到它。 image.png

查看包內容

pkg 能夠方便的作到這一點,配合 yarn list 使用效果更佳 unpkg.com/packagename

統計

analytics 是真的方便,誰用誰知道,能夠配合 umijs.org/plugins/plu… 一塊兒使用。

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

相關文章
相關標籤/搜索