寫在前面
沒有釋出過npm包的同學，可能會對NPM對開發有一種蜜汁敬畏，覺得這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發過npm包，當時隻用過還沒寫過，我想應該挺難的，就小聲說了沒有，然後就讓我回去了o(╯□╰)o。
其實，在現在的我看來，npm包就是一個我們平時經常寫的一個
export
出來的子產品而已，隻不過跟其它業務代碼耦合性低，具有較高的獨立性。
當然，要釋出一個npm包，除了寫的子產品元件外，還需要做一些基礎的包裝工作。下面我就以最近開發的
「DigitalKeyboard 數字鍵盤 NPM」為例，一一列出具體步驟：
- 寫基礎子產品代碼；
- 注冊npm賬号；
- 配置package.json；
- 配置webpack；
- 添加單元測試；
- 完善README.md；
- 釋出
1、2、3足可以完成一個npm，4、5、6是為了開發一個高品質的npm。
Demo：
https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2018%2F5%2F21%2F16381907db3ef7fe%3Fw%3D300%26h%3D529%26f%3Dgif%26s%3D291872 https://link.juejin.im?target=https%3A%2F%2Fuser-gold-cdn.xitu.io%2F2018%2F5%2F21%2F16381907db3ef7fe%3Fw%3D300%26h%3D529%26f%3Dgif%26s%3D291872開始
具體代碼移步
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 <[email protected]>",
"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
-
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
添加單元測試
大家經常看到很多不錯的項目都有
https://link.juejin.im?target=https%3A%2F%2Ftravis-ci.org%2Fsimbawus%2FDigitalKeyboard https://link.juejin.im?target=https%3A%2F%2Ftravis-ci.org%2Fsimbawus%2FDigitalKeyboard，這就像一個證明可用性的證書，給人安全感和信任感，是以添加單元測試，還是很有必要的，同時也可以提高代碼品質。先介紹需要用到的幾個概念：
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是決定使用者用不用你項目的關鍵因素，是以要多花點心思，千萬不能忽略。
- 标題：直覺的描述這個項目是幹什麼的。
- 徽章： https://link.juejin.im?target=https%3A%2F%2Ftravis-ci.org%2Fsimbawus%2FDigitalKeyboard https://link.juejin.im?target=https%3A%2F%2Fcoveralls.io%2Fgithub%2Fsimbawus%2FDigitalKeyboard%3Fbranch%3Dmaster https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fdigital-keyboard https://link.juejin.im?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fdigital-keyboard https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsimbawus%2FDigitalKeyboard%2Fblob%2Fmaster%2FLICENSE 分别表示是否建構成功、代碼測試覆寫率、npm版本号、下載下傳量、開源證書，看起來逼格滿滿有木有。推薦去 shields io 添加，生成一次，之後會自動更新，不過需要等npm釋出後才能搜到。
- 配圖：要讓使用者直覺的看到這個元件長什麼樣，是否滿足他的需求。
- API介紹：不能讓使用者猜。
- 使用示例：盡量降低使用門檻。
#先登入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是包的版本号
複制代碼 接下來，我們可以在
npm官網，通過搜尋包名或者在個人中心看到剛剛釋出的包。
原文釋出時間：2018-6-20
原文作者： 薄荷前端
本文來源
掘金如需轉載請緊急聯系作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)