【Count】自動化爲你的項目添加證實可靠性的 badge

前言

開源社區裏，開源項目通常會將一排花花綠綠的 badge（徽章）擺在 README 最顯眼的位置，它們通常能夠起到一些說明和證實的做用。
好比下面的這個項目（傳送門）：

• 第一個 badge 證實其能正常構建，點擊跳轉至構建過程報告；
• 第二個 badge 證實其測試覆蓋率達到100%，點擊跳轉至單元測試報告；
• 第三個 badge 說明其是 MIT 受權協議；
• 第四個 badge 說明其最小化後包的大小；

別覺得他們只是圖片，正規的項目是隨項目更新而更新的，點擊不了或者點擊進入的不是對應項目的報告均可以算做僞造，請遠離這些項目。
上面提到的 badge 中前兩個能夠算是項目可靠性的證實，是比較有分量的 badge，接下來咱們將指引你們如何自動化添加這兩 badge。

注意：本文以 Github 爲代碼倉庫，第三方賬號受權都以 Github 賬號進行，請確保自身網絡環境能正常訪問；不涉及項目自己的構建和測試。

準備

• 編寫一個項目，在 package.json 中以「build」爲構建命令，dist 爲打包後輸出的目錄；
• 編寫好該項目的單元測試，在 package.json 中以「test:prod」爲測試命令，而且會自動在 coverage 目錄下生成覆蓋率報告；

• 爲項目安裝 devDependencies（開發依賴）：

  • coveralls
• 註冊一個 Github 賬號，提交項目到一個倉庫。

Travis 配置

Travis CI 提供的是持續集成服務（Continuous Integration，簡稱 CI）。它綁定 Github 上面的項目，只要有新的代碼，就會自動抓取。而後，提供一個運行環境（容器），執行測試，完成構建，還能自動部署到服務器。
本次的自動化就是依靠這個服務完成的，這裏只展現相關的配置，更多的用法請自行查看文檔。

新建配置文件

在項目根目錄下新建 .travis.yml 文件，輸入下面配置並保存。

language: node_js
cache: npm
notifications:
  email: false
node_js:
  - '10'
script:
  - npm run test:prod && npm run build
after_success:
  - npm run report-coverage
branches:
  except:
    - /^v\d+\.\d+\.\d+$/

配置說明：

• language：Travis 能夠支持多種語言，這裏是 node 項目，填「node_js」便可；
• cache：緩存，可加快構建。配置爲 npm 會緩存 $HOME/.npm 和 node_modules 目錄；
• notifications：默認狀況下會郵件通知提交者和做者，若是不須要則設置爲 false，還支持設置鉤子、接口通知等方式，詳細見文檔；
• node_js：運行容器安裝的 node 版本，這裏是指構建和測試的環境，與實際運行環境是不一樣的，通常與本機相同便可，設置多個的話每次每個都會運行一次，會增長構建時間；
• script：要運行的命令，這裏咱們進行的就是單元測試和構建兩步操做；
• after_success：script 運行結束，且無錯誤的狀況下運行的命令，這裏咱們進行單測覆蓋率報告提交；
• branches：須要運行的 git 分支，默認是隻運行主分支，這裏咱們增長了對「vXX.XX.XX」分支的支持。

開啓 Travis 監聽

1. 進入 Travis 官網：https://travis-ci.com/；
2. 用 Github 賬號受權登陸；
3. 點擊左上角的加號，或者點擊指引裏的按鈕，進入對 Github 倉庫進行受權；
   
4. 能夠選擇受權當前 Github 賬號的部分倉庫，也能夠選擇所有。
   

獲取構建 badge 代碼

待倉庫導入後，進入項目主頁，右上角就能看到 badge，點擊它會彈出一個選擇代碼類型的彈框，選擇須要的類型複製粘貼到 README 就好了（通常選擇 Markdown）。

Coveralls 配置

Coveralls 是一個展現單元測試覆蓋率報告的網站，它自己不會運行單測或生成報告，它只是提供用於提交標準單元測試覆蓋率報告的包（也就是上面準備階段安裝的coveralls），能夠配合測試套件使用。

編寫提交命令

以 Jest 爲例，默認運行jest --coverage後會在 coverage 目錄下生成標準的單測報告。但咱們不須要在本地跑，Travis 會幫咱們完成，只須要確保能夠目錄正確便可。
上面 .travis.yml 中咱們使用了「report-coverage」命令，這個是自定義的 scripts，在 package.json 裏的 scripts 塊中寫入該命令，

"scripts": {
  "report-coverage": "cat ./coverage/lcov.info | coveralls",
}

開啓 Coveralls 監聽

1. 進入 Coveralls 官網：https://coveralls.io/；
2. 用 Github 賬號受權登陸；
3. 點擊右側加號（ADD REPO）；
4. 把須要的項目的開關打開；
   

獲取覆蓋率 badge 代碼

點擊 DETAILS 進入詳情頁，這時候你還未有報告，因此看到的是指引頁，咱們能夠先在底部找到獲取 badge 代碼的入口，選擇須要的類型複製粘貼到 README 就好了（通常選擇 Markdown）。

完成，啓動 Travis

將 .travis.yml、package.json 和 README 提交，Travis 監聽到提交就會啓動運行。偶爾第一次未成功 ，能夠點擊 Travis 的項目詳情頁右側，點擊「Trigger build」手動開啓。

額外配置（可選）

由於 Coveralls 自己就已經能與 Travis 無縫配合，默認狀況下它們會識別相同的倉庫，並更新。
但若是你使用的是 Travis Pro（Travis 的付費版，通常免費的已經夠用）和其餘 CI 系統，或者須要非 git 主分支的結果時，須要進行寫入環境變量告知系統。
Coveralls 提供三個必填項：

• COVERALLS_SERVICE_NAME：CI 系統名，好比 travis-pro；
• COVERALLS_REPO_TOKEN：Coveralls 給每一個項目的惟一標識，也是提交單測覆蓋率報告的依據；
• COVERALLS_GIT_BRANCH：提交報告是哪一個 git 分支。

全局的環境變量

若是是全局的變量，能夠直接寫到 .travis.yml 文件的 env 塊。好比：

env:
  - DB=postgres
  - SH=bash
  - PACKAGE_VERSION="1.0.*"

局部的環境變量

若是是每一個命令獨立使用的變量，能夠直接寫到 .travis.yml 文件的 script 塊裏的命令裏。

script:
  - COVERALLS_GIT_BRANCH=test npm run test:prod && npm run build

固然同理寫到 package.json 文件的 script 也是能夠的。

一些不能公開的變量

不管寫到 .travis.yml 或 package.json 文件都須要提交的 git，這些內容都會公開（公共倉庫），但相似 COVERALLS_REPO_TOKEN 這類數據是不能公開的。
所以咱們能夠將他們寫到 Travis 上項目的設置裏（這不是加密，若是要更加嚴格的加密，可使用加密文件，詳情看Travis 文檔）。

1. 進入項目對應的 Travis 主頁；
2. 點擊右上角的「More options」裏「Settings」；
3. 在「Environment Variables」塊進行「ADD」操做。

結束

教程到此已經完成，總體流程就是：經過 Travis 配置監聽 Github 上對應倉庫的提交，Travis 發現提交就拉取代碼，在 Travis 提供的容器裏完成構建和單元測試，完成後再自動提交單測覆蓋率報告到 Coveralls，最終結果反映到 README 的 badge 上。一勞永逸，還不趕忙試試。