寫在前面
沒有發(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」 為例掀亩，一一列出具體步驟：
- 寫基礎(chǔ)模塊代碼；
- 注冊npm賬號欢顷；
- 配置package.json槽棍；
- 配置webpack；
- 添加單元測試抬驴；
- 完善README.md炼七；
- 發(fā)布
1、2布持、3足可以完成一個npm豌拙，4、5题暖、6是為了開發(fā)一個高質(zhì)量的npm按傅。
開始
具體代碼移步github，請反手 給個 ★ 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 <connect@simbawu.com>",
"description": "DigitalKeyboard Component",
"keywords": [
"DigitalKeyboard",
"Digital",
"Keyboard",
]
}
此時的配置文件也比較簡單滴须，只需配置npm包名舌狗，準(zhǔn)備用的名字現(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ā)模式，并分別做了默認(rèn)壓縮處理秉剑，非常適合這里泛豪。有兩點要特別說明下：
-
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
添加單元測試
大家經(jīng)常看到很多不錯的項目都有build passing蚯姆，這就像一個證明可用性的證書五续，給人安全感和信任感，所以添加單元測試龄恋，還是很有必要的疙驾，同時也可以提高代碼質(zhì)量。先介紹需要用到的幾個概念：
mocha：測試框架郭毕；
chai：斷言庫它碎，斷言通俗來講就是判斷代碼結(jié)果對不對；
jsdom：node端是沒有js dom對象的显押，比如window扳肛、document等等，所以需要這個庫提供乘碑；
istanbul：代碼覆蓋率計算工具挖息；
coveralls：統(tǒng)計上面的代碼測試覆蓋率工具；
travis-ci：自動集成兽肤，比如master代碼push到github上之后套腹，travis-ci就會自動進(jìn)行自動化測試。
這里介紹下jsdom的用法资铡，當(dāng)時按照幾個文檔來都跑不通：
const {JSDOM} = require('jsdom');
const {window} = new JSDOM(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="author" content="吳勝斌,simbawu">
<title>數(shù)字鍵盤</title>
</head>
<body>
<div id="values"></div>
<div id="app"></div>
</body>
</html>`);
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)鍵因素亥揖，所以要多花點心思珊擂，千萬不能忽略圣勒。
標(biāo)題：直觀的描述這個項目是干什么的。
-
徽章：
icon.png分別表示是否構(gòu)建成功摧扇、代碼測試覆蓋率圣贸、npm版本號、下載量扛稽、開源證書吁峻，看起來逼格滿滿有木有。推薦去shields io 添加在张，生成一次用含，之后會自動更新，不過需要等npm發(fā)布后才能搜到帮匾。
配圖：要讓用戶直觀的看到這個組件長什么樣啄骇，是否滿足他的需求。
API介紹：不能讓用戶猜瘟斜。
使用示例：盡量降低使用門檻缸夹。
發(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ā)布的包趟妥。
歡迎討論，點個贊再走吧～
文章同步于以下社區(qū)佣蓉，可以選一個關(guān)注我噢 ?????
