簡易npm包的開發流程 總結

npm 設置

在開發一個Npm包的時候，最開始肯定是要初始化好環境：

npm set init.author.name "scq000"
npm set init.author.email "[email protected]"
              
npm set init.author.url "https://scq000.github.io"
              
npm set init.license 'MIT'
              
cat ~/.npmrc

設置好基礎的配置後，後續在開發新的項目的時候，會自動在package.json中帶上預先定義的配置信息。

生成changelog

對於對外使用的npm包來說，版本更新記錄是十分重要的，可以考慮使用commitzen 在每次提交代碼的時候，遵循規範。

cz-conventional-changelog 是和commitizen配套使用的規則集，通常來說項目裏直接使用默認配置即可：

  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },

另外，git-cz是將commitizen和git相結合的工具，根據官方文檔配置後，可以直接在命令行中執行：

npx git-cz

就能實現在代碼提交的時候，提供交互式的命令行來填寫規範化的commit信息。

[圖片上傳失敗...(image-825803-1650939725828)]

githook配置

githook的配置，可以限制在每次代碼提交過程中，執行一些前置的代碼檢測、單元測試等工作。

執行如下命令：

npm install -D ghooks

然後，在項目的package.json配置文件裏，配置一下鉤子：

          config: {
            ghooks: {
              "pre-commit": "npm run test:single"
            }
          }

這樣一來，在每次執行git commit命令之前都會執行我們預定義的腳本。

發佈自動化

自動化在包的研發過程中是必不可少的，目前業界已經有較多成熟的方案。

semantic

semantic-release提供了在git上實現自動化發佈的整套解決方案，可以在項目中使用如下命令行初始化：

npx semantic-release-cli setup

隨後，根據提示進行輸入項目信息即可

[圖片上傳失敗...(image-5f64d-1650939725829)]

自動化測試

覆蓋率及報告

對於前端代碼的自動化測試，可以藉助istanbul.js來實現覆蓋率的統計：

在項目腳本中配置如下命令:

{
  "script": {
     "test": "nyc --reporter=html --reporter=text mocha",
     "coverage": "nyc report --reporter=text-lcov | coveralls"
  }
}

最終能夠生成項目整體的測試統計報告信息。

生成github標誌

https://shields.io是用來生成項目狀態圖標的工具，在READEME.md文件的開頭貼上根據項目生成的圖標，就能直接根據圖標狀態來觀測項目構建的狀態。

[![Npm Package Demo](https://img.shields.io/badge/npm%20package%20demo-publish-green)](https://scq000.github.io/xxx)[![Npm Package Demo](https://img.shields.io/badge/npm-package-demo-published-blue.svg)

[圖片上傳失敗...(image-84a033-1650939725829)]

總結

本篇文章提供的這些流程，可以根據自身需求集成到腳手架上，從而可以在日常維護開源項目等場景中，能夠高效開發。