寫在前面
沒有宣布過npm包的同硯，能夠會對NPM對開闢有一種蜜汁畏敬，以為這是一個很嵬峨上的東西。甚至有次口試，口試官問我有無發過npm包，當時只用過還沒寫過，我想應當挺難的，就小聲說了沒有，然後就讓我回去了o(╯□╰)o。
實在，在如今的我看來，npm包就是一個我們日常平凡常常寫的一個export出來的模塊罷了，只不過跟別的營業代碼耦合性低，具有較高的獨立性。
固然，要宣布一個npm包，除了寫的模塊組件外，還須要做一些基本的包裝事情。下面我就以近來開闢的「DigitalKeyboard 数字鍵盤 NPM」 為例，逐一列出詳細步驟：
- 寫基本模塊代碼；
- 註冊npm賬號；
- 設置package.json；
- 設置webpack；
- 增加單元測試；
- 完美README.md；
- 宣布
1、2、3足能夠完成一個npm，4、5、6是為了開闢一個高質量的npm。
最先
詳細代碼移步github，請反手 給個 ★ Star ^_~。完全目次組織以下：
├── 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
基本模塊代碼
如今只須要看src目次下的三個文件。个中，main.js 主假如對將要開闢模塊的援用，只需存在於開闢階段，同時作為此階段webpack的進口文件，中間代碼在Keyboard.js。
這裏，主要用的是ES6的class和export default，Keyboard的中間頭腦就是點擊哪一個鍵就對外輸出什麼內容，完成也比較簡單，人人都能看得懂，這裏就不睜開講了，詳細能夠看github 源碼。
註冊npm賬號
這一步也不必說，人人直接去官網註冊就好了。
設置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包名，準備用的名字如今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。
├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js
增加單元測試
人人常常看到許多不錯的項目都有，這就像一個證實可用性的證書，給人安全感和信任感，所以增加單元測試，照樣很有必要的，同時也能夠進步代碼質量。先引見須要用到的幾個觀點：
mocha：測試框架；
chai：斷言庫，斷言淺顯來說就是推斷代碼效果對不對；
jsdom：node端是沒有js dom對象的，比方window、document等等，所以須要這個庫供應；
istanbul：代碼覆蓋率盤算東西；
coveralls：統計上面的代碼測試覆蓋率東西；
travis-ci：自動集成，比方master代碼push到github上以後，travis-ci就會自動舉行自動化測試。
這裏引見下jsdom的用法，當時根據幾個文檔來都跑不通：
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>数字鍵盤</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，然後組織一個document，並引入个中的window對象然後逐一賦值給node的global對象。實在也很簡單，只不過第一次打仗，而且找的文檔寫的也不清楚，所以花了點時候。其他幾個文檔都還不錯，能夠看看文檔再看看我是怎樣用的。此時的package.json就很很雄厚了，能夠實行yarn test和yarn cover看看測試是不是經由過程及測試覆蓋率。
完美README.md
一個好的readme是決議用戶用不必你項目的關鍵因素，所以要多花點心機，萬萬不能疏忽。
- 題目：直觀的形貌這個項目是干什麼的。
- 徽章：
離別示意是不是構建勝利、代碼測試覆蓋率、npm版本號、下載量、開源證書，看起來逼格滿滿有木有。引薦去shields io 增加，天生一次，以後會自動更新，不過須要等npm宣布后才搜到。 - 配圖：要讓用戶直觀的看到這個組件長什麼樣，是不是滿足他的需求。
- API引見：不能讓用戶猜。
- 運用示例：只管下降運用門坎。
宣布
#先登錄NPM賬號：
npm login
#會順次讓你輸入用戶名、暗碼、和郵箱
Username: simbawu
Password:
Email: (this IS public) wsbin610@163.com
#登錄勝利會湧現以下提醒信息：
Logged in as simbawu on https://registry.npmjs.org/.
#實行宣布命令：
npm publish
#宣布勝利後會湧現以下提醒信息：
+ digital-keyboard@1.0.0
#這裏digital-keyboard是我的NPM包名，1.0.0是包的版本號接下來，我們能夠在npm官網，經由過程搜刮包名或許在個人中間看到方才宣布的包。
迎接議論，點個贊再走吧～
文章同步於以下社區，能夠選一個關注我噢 ｡◕‿◕｡
