作者： 吳勝斌
www.simbawu.com/article/search/12
寫在前面
沒有發(fā)布過npm包的同學(xué)，可能會對NPM對開發(fā)有一種蜜汁敬畏，覺得這是一個很高大上的東西线召。甚至有次面試，面試官問我有沒有發(fā)過npm包多矮，當(dāng)時只用過還沒寫過缓淹，我想應(yīng)該挺難的哈打，就小聲說了沒有，然后就讓我回去了o(╯□╰)o讯壶。
其實料仗，在現(xiàn)在的我看來，npm包就是一個我們平時經(jīng)常寫的一個export出來的模塊而已伏蚊，只不過跟其它業(yè)務(wù)代碼耦合性低立轧，具有較高的獨立性。
當(dāng)然搜贤，要發(fā)布一個npm包笨腥，除了寫的模塊組件外恬口，還需要做一些基礎(chǔ)的包裝工作。下面我就以最近開發(fā)的「DigitalKeyboard 數(shù)字鍵盤 NPM」?為例胜卤，一一列出具體步驟：
1、寫基礎(chǔ)模塊代碼赁项；
2葛躏、注冊npm賬號；
3肤舞、配置package.json紫新；
4、配置webpack李剖；
5芒率、添加單元測試；
6篙顺、完善README.md偶芍；
7、發(fā)布
1德玫、2匪蟀、3足可以完成一個npm，4宰僧、5材彪、6是為了開發(fā)一個高質(zhì)量的npm。
開始
具體代碼移步github（https://github.com/simbawus/DigitalKeyboard）琴儿，請反手?給個 ★ Star ^_~段化。完整目錄結(jié)構(gòu)如下：
├── LICENSE
├── README.md
├── build
│ ? └── Keyboard.js
├── config
│ ? └── webpack
│ ? ? ? ├── webpack.base.config.js
│ ? ? ? ├── webpack.config.js
│ ? ? ? ├── webpack.dev.config.js
│ ? ? ? └── webpack.prod.config.js
├── index.html
├── package.json
├── src
│ ? ├── Keyboard.js
│ ? ├── Keyboard.scss
│ ? └── main.js
├── test
│ ? └── Keyboard.test.js
└── yarn.lock
基礎(chǔ)模塊代碼
現(xiàn)在只需要看src目錄下的三個文件。其中造成，main.js 主要是對將要開發(fā)模塊的引用显熏，只需存在于開發(fā)階段，同時作為此階段webpack的入口文件晒屎，核心代碼在Keyboard.js喘蟆。
這里缓升，主要用的是ES6的class和export default，Keyboard的核心思想就是點擊哪個鍵就對外輸出什么內(nèi)容蕴轨，實現(xiàn)也比較簡單港谊，大家都能看得懂，這里就不展開講了尺棋，具體可以看github 源碼封锉。
注冊npm賬號
這一步也不用說，大家直接去官網(wǎng)注冊就好了膘螟。
配置package.json
{
"name": "digital-keyboard",
"version": "1.0.0",
"main": "build/Keyboard.js",
"repository": "https://github.com/simbawus/DigitalKeyboard.git",
"author": "simbawu ",
"description": "DigitalKeyboard Component",
"keywords": [
"DigitalKeyboard",
"Digital",
"Keyboard",
]
}
此時的配置文件也比較簡單成福，只需配置npm包名，準備用的名字現(xiàn)在npm搜索一下荆残，已經(jīng)存在的就不能用了奴艾；版本號version，每次發(fā)布版本號都需要更新内斯，不然發(fā)布不成功蕴潦；對外export的文件路徑，這里我用的是webpack打包后的文件俘闯，如果不用webpack潭苞，直接引用src/Keyboard.js也可以，只不過要做模塊化方式兼容真朗，這個后面說此疹。也可以放上項目所在github地址及作者名，description和keywords比較利于SEO遮婶，不過這些都不是必需項蝗碎。
到這里，一個npm包就開發(fā)完成了旗扑，直接發(fā)布即可使用蹦骑。但是，略顯粗糙：代碼壓縮臀防、單元測試眠菇、readme都沒寫，別人不知道怎么用也不敢用袱衷。下面一步步完善琼锋。
配置webpack
這里用的是最新版的webpack4，官方提供production和development兩種開發(fā)模式祟昭，并分別做了默認壓縮處理，非常適合這里怖侦。有兩點要特別說明下：
libraryTarget: 'umd'
umd有的同學(xué)可能不是太熟悉篡悟，但是cmd谜叹、amd大家應(yīng)該都知道，分別應(yīng)用于服務(wù)端和瀏覽器端的模塊方案搬葬。umd就是前面提到的模塊化方式兼容荷腊。感興趣可以參考我的另一篇文章JavaScript Module 設(shè)計解析及總結(jié)。
production和development的entry不一樣：
development的entry是main.js急凰，而production的entry是Keyboard.js女仰。前面說過，開發(fā)階段需要有對模塊的引用抡锈，但是正式發(fā)布就不需要了疾忍，所以要分別配置。
其他就不展開講了床三，我的webpack配置結(jié)構(gòu)很清晰一罩，歡迎大家直接copy。
├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js
添加單元測試
1撇簿、mocha：測試框架聂渊；
2、chai：斷言庫四瘫，斷言通俗來講就是判斷代碼結(jié)果對不對汉嗽；
3、jsdom：node端是沒有js dom對象的找蜜，比如window饼暑、document等等，所以需要這個庫提供锹杈；
4撵孤、istanbul：代碼覆蓋率計算工具；
5竭望、coveralls：統(tǒng)計上面的代碼測試覆蓋率工具邪码；
6、travis-ci：自動集成咬清，比如master代碼push到github上之后闭专，travis-ci就會自動進行自動化測試。
這里介紹下jsdom的用法旧烧，當(dāng)時按照幾個文檔來都跑不通：
const {JSDOM} = require('jsdom');
const {window} = new JSDOM(`
數(shù)字鍵盤
`);
propagateToGlobal(window);
function propagateToGlobal(window) {
for (let key in window) {
if (!window.hasOwnProperty(key)) continue;
if (key in global) continue;
global[key] = window[key];
}
}
首先引入jsdom影钉，然后構(gòu)造一個document，并引入其中的window對象然后一一賦值給node的global對象掘剪。其實也很簡單平委，只不過第一次接觸，而且找的文檔寫的也不清楚夺谁，所以花了點時間廉赔。其他幾個文檔都還不錯肉微，可以看看文檔再看看我是怎么用的。此時的package.json就很很豐富了蜡塌，可以執(zhí)行yarn test和yarn cover看看測試是否通過及測試覆蓋率碉纳。
完善README.md
一個好的readme是決定用戶用不用你項目的關(guān)鍵因素，所以要多花點心思馏艾，千萬不能忽略劳曹。
1、標題：直觀的描述這個項目是干什么的琅摩。
2铁孵、徽章：
4、分別表示是否構(gòu)建成功迫吐、代碼測試覆蓋率库菲、npm版本號、下載量志膀、開源證書熙宇，看起來逼格滿滿有木有。推薦去shields io?添加溉浙，生成一次烫止，之后會自動更新，不過需要等npm發(fā)布后才能搜到戳稽。
5馆蠕、配圖：要讓用戶直觀的看到這個組件長什么樣，是否滿足他的需求惊奇。
6互躬、API介紹：不能讓用戶猜。
7颂郎、使用示例：盡量降低使用門檻吼渡。
發(fā)布
#先登錄NPM賬號：
npm login
#會依次讓你輸入用戶名、密碼乓序、和郵箱
Username: simbawu
Password:
Email: (this IS public) wsbin610@163.com
#登錄成功會出現(xiàn)以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.
#執(zhí)行發(fā)布命令：
npm publish
#發(fā)布成功后會出現(xiàn)以下提示信息：
+ digital-keyboard@1.0.0
#這里digital-keyboard是我的NPM包名寺酪，1.0.0是包的版本號
接下來，我們可以在npm官網(wǎng)替劈，通過搜索包名或者在個人中心看到剛剛發(fā)布的包寄雀。
感興趣的小伙伴，可以關(guān)注公眾號【grain先森】陨献，回復(fù)關(guān)鍵詞 “vue”盒犹，獲取更多資料，更多關(guān)鍵詞玩法期待你的探索~
