發佈一個放心使用而且可維護的npm包(以發佈一個深拷貝方法爲例)

發佈一個讓用戶放心使用而且可維護的npm包(以發佈一個深拷貝包爲例)

先上圖片

1、怎樣纔是一個放心使用而且可維護的 npm 包

• 發佈的包能構建成功
• 發佈的包通過測試用例測試而且測試用例覆蓋率達到必定程度(只有通過測試用戶才能放心使用)
• 發佈的包是符合代碼規範, 提交規範(能讓參與項目維護的用戶使用同一套代碼規範)

2、以發佈一個深拷貝包爲例，編寫而且發佈 npm 流程

• 設置 package.json 文件
• webpack 配置
• 配置 eslint、prettier
• 編寫深拷貝方法
• 編寫單元測試/運行測試/測試報告
• 使用git cz, 讓提交的代碼更規範
• 提交前格式化代碼
• 放到 github 上
• 自動構建和自動化測試
• 項目徽章設置
• 發佈包

3、package.json 配置

npm init 建立 package.json 文件，個人 package.json 文件配置

package.json 文件配置參考文檔

• 官方文檔 Creating a package.json file
• npm 新的包名規範
• npm 包結構
• npm 包描述文件與 NPM
• npm 版本號規範

4、webpack 配置

webpack 幫咱們作的事

• 打包 js 文件
• es6 的支持

如何配置

• 配置文件入口和出口
• 配置.babelrc 支持 es6

webpack 配置參考文檔

• webpack 官方中文指南
• babel 配置 ps: 以後會寫一篇關於 webpack 配置的，再補充進來

5、編寫深拷貝方法

實現深拷貝數組和對象。函數和Date類型不作深拷貝。
複製代碼

6、添加單元測試

爲何要單元測試 只有經過單元測試並有必定的測試覆蓋率，用戶才能放心使用你發佈的包

怎麼單元測試

• 使用 mocha 作單元測試
• 使用 chai 的 expect 作斷言庫(還有不少種選擇 用 nodeJS 原生的 assert 庫也行)
• 使用 nyc 生成測試覆蓋率(istanbul 也能夠)
• 編寫測試用例

安裝的包: npm i chai mocha nyc -D

參考文檔

• mocha 官方教程
• 阮一峯 測試框架 Mocha 實例教程
• chai 官網
• nyc 教程 我參考 npm 包的 readme

ps: 在測試文件中使用 import 須要引入@babel/register 包(改寫 require 命令，爲它加上一個鉤子。此後，每當使用 require 加載.js、.jsx、.es 和.es6 後綴名的文件，就會先用 Babel 進行轉碼)， 使用以下命令: nyc mocha --require @babel/register -R spec test

7、 使用git cz, 規範Commit message

參考文檔：

• commitizen 使用官方文檔
• 阮一峯 Commit message 和 Change log 編寫指南

8、eslit 和 prettier 配置

使用 husky 和 lint-staged 配合 eslit 和 prettier 在提交代碼的時候格式化代碼，使得提交的代碼可以統一規範

參考文檔:

• eslint 官方文檔
• prettier 官方文檔
• 使用 husky, prettier, eslint 在代碼提交時自動格式化，並檢查代碼

9、CI/CD 持續集成服務、自動構建和自動化測試

• travis-ci Travis CI 提供的是持續集成服務（Continuous Integration，簡稱 CI）。它綁定 Github 上面的項目，只要有新的代碼，就會自動抓取。而後，提供一個運行環境，執行測試，完成構建，還能部署到服務器。

持續集成指的是隻要代碼有變動，就自動運行構建和測試，反饋運行結果。確保符合預期之後，再將新代碼"集成"到主幹。

持續集成的好處在於，每次代碼的小幅變動，就能看到運行結果，從而不斷累積小的變動，而不是在開發週期結束時，一會兒合併一大塊代碼。

• travis-ci 官方文檔

• javascript width nodejs .travis.yml 配置教程

• 阮一峯 持續集成服務 Travis CI 教程

• codecov

改善您的代碼審查工做流程和質量。 Codecov 提供高度集成的工具來分組，合併，存檔和比較覆蓋率報告

網上的教程比較少 本身寫個

• 在 github 導航欄的 Marketplace 中添加 Codecov

  

• 在codecov用 github 帳號登陸

  

• 添加新項目

  

• 選擇一個項目

  

• 複製 token, 放在.travis.yml 文件中

    // 這個token用來上傳測試報告到對應的項目的
    env: - CODECOV_TOKEN="6a3d8b1b-fe8e-44cb-8b6d-6af0d9344adc" 
    

  

• 在.travis.yml 文件中添加以下命令

        install:
        - npm install //安裝依賴包
        - sudo pip install codecov // 安裝codecov包
        script:
        - npm test // 執行測試用例
        - npm run report-coverage //生成測試報告
    

• 在 package.json 文件中添加

        "test": "nyc mocha --require @babel/register -R spec test", // 執行測試用例
        "report-coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov" // 上傳測試報告
    

參考文檔

• codecov 官方文檔
• codecov js node 環境 example

10、github 徽章設置

• github 徽章設置官網

11、發佈包

• npm login
• 填寫用戶名和密碼郵箱
• npm publish
• npm 報錯了，緣由是跟已發佈的包重名了， 修改了 package.json 中的 name，改爲 zwclonedeep(You do not have permission to publish "clonedeep". Are you logged in as the correct user?)
• 發佈成功+ zwclonedeep@1.0.0