www.simbawu.com/article/search/12
寫在前面
沒有發佈過npm包的同學，可能會對NPM對開發有一種蜜汁敬畏，覺得這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發過npm包，當時只用過還沒寫過，我想應該挺難的，就小聲說了沒有，然後就讓我回去了o(╯□╰)o。
其實，在現在的我看來，npm包就是一個我們平時經常寫的一個export出來的模塊而已，只不過跟其它業務代碼耦合性低，具有較高的獨立性。
當然，要發佈一個npm包，除了寫的模塊組件外，還需要做一些基礎的包裝工作。下面我就以最近開發的「DigitalKeyboard 數字鍵盤 NPM」 為例，一一列出具體步驟：
1、寫基礎模塊代碼；
2、註冊npm賬號；
3、配置package.json；
4、配置webpack；
5、添加單元測試；
6、完善README.md；
7、發佈
1、2、3足可以完成一個npm，4、5、6是為了開發一個高質量的npm。
開始
具體代碼移步github（https://github.com/simbawus/DigitalKeyboard），請反手 給個 ★ Star ^_~。完整目錄結構如下：
基礎模塊代碼
現在只需要看src目錄下的三個文件。其中，main.js 主要是對將要開發模塊的引用，只需存在於開發階段，同時作為此階段webpack的入口文件，核心代碼在Keyboard.js。
這裡，主要用的是ES6的class和export default，Keyboard的核心思想就是點擊哪個鍵就對外輸出什麼內容，實現也比較簡單，大家都能看得懂，這裡就不展開講了，具體可以看github 源碼。
註冊npm賬號
這一步也不用說，大家直接去官網註冊就好了。
配置package.json
<code>{
"name": "digital-keyboard",
"version": "1.0.0",
"main": "build/Keyboard.js",
"repository": "https://github.com/simbawus/DigitalKeyboard.git",
"author": "simbawu <connect>",
"description": "DigitalKeyboard Component",
"keywords": [
"DigitalKeyboard",
"Digital",
"Keyboard",
]
}/<connect>/<code>此時的配置文件也比較簡單，只需配置npm包名，準備用的名字現在npm搜索一下，已經存在的就不能用了；版本號version，每次發佈版本號都需要更新，不然發佈不成功；對外export的文件路徑，這裡我用的是webpack打包後的文件，如果不用webpack，直接引用src/Keyboard.js也可以，只不過要做模塊化方式兼容，這個後面說。也可以放上項目所在github地址及作者名，description和keywords比較利於SEO，不過這些都不是必需項。
到這裡，一個npm包就開發完成了，直接發佈即可使用。但是，略顯粗糙：代碼壓縮、單元測試、readme都沒寫，別人不知道怎麼用也不敢用。下面一步步完善。
配置webpack
這裡用的是最新版的webpack4，官方提供production和development兩種開發模式，並分別做了默認壓縮處理，非常適合這裡。有兩點要特別說明下：
- libraryTarget: 'umd'umd有的同學可能不是太熟悉，但是cmd、amd大家應該都知道，分別應用於服務端和瀏覽器端的模塊方案。umd就是前面提到的模塊化方式兼容。感興趣可以參考我的另一篇文章JavaScript Module 設計解析及總結。
- production和development的entry不一樣：development的entry是main.js，而production的entry是Keyboard.js。前面說過，開發階段需要有對模塊的引用，但是正式發佈就不需要了，所以要分別配置。
其他就不展開講了，我的webpack配置結構很清晰，歡迎大家直接copy。
<code>├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js/<code>
添加單元測試
大家經常看到很多不錯的項目都有
，這就像一個證明可用性的證書，給人安全感和信任感，所以添加單元測試，還是很有必要的，同時也可以提高代碼質量。先介紹需要用到的幾個概念：
- mocha：測試框架；
- chai：斷言庫，斷言通俗來講就是判斷代碼結果對不對；
- jsdom：node端是沒有js dom對象的，比如window、document等等，所以需要這個庫提供；
- istanbul：代碼覆蓋率計算工具；
- coveralls：統計上面的代碼測試覆蓋率工具；
- travis-ci：自動集成，比如master代碼push到github上之後，travis-ci就會自動進行自動化測試。
這裡介紹下jsdom的用法，當時按照幾個文檔來都跑不通：
首先引入jsdom，然後構造一個document，並引入其中的window對象然後一一賦值給node的global對象。其實也很簡單，只不過第一次接觸，而且找的文檔寫的也不清楚，所以花了點時間。其他幾個文檔都還不錯，可以看看文檔再看看我是怎麼用的。此時的package.json就很很豐富了，可以執行yarn test和yarn cover看看測試是否通過及測試覆蓋率。
完善README.md
一個好的readme是決定用戶用不用你項目的關鍵因素，所以要多花點心思，千萬不能忽略。
- 標題：直觀的描述這個項目是幹什麼的。
- 徽章：分別表示是否構建成功、代碼測試覆蓋率、npm版本號、下載量、開源證書，看起來逼格滿滿有木有。推薦去shields io 添加，生成一次，之後會自動更新，不過需要等npm發佈後才能搜到。
- 配圖：要讓用戶直觀的看到這個組件長什麼樣，是否滿足他的需求。
- API介紹：不能讓用戶猜。
- 使用示例：儘量降低使用門檻。
發佈
<code>#先登錄NPM賬號：
npm login
#會依次讓你輸入用戶名、密碼、和郵箱
Username: simbawu
Password:
Email: (this IS public) [email protected]
#登錄成功會出現以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.
#執行發佈命令：
npm publish
#發佈成功後會出現以下提示信息：
+ [email protected]
#這裡digital-keyboard是我的NPM包名，1.0.0是包的版本號/<code>
接下來，我們可以在npm官網，通過搜索包名或者在個人中心看到剛剛發佈的包。
閱讀更多 程序員BUG 的文章
