手把手教你發佈一個無依賴多類型高質量的鍵盤npm包

時間 2019-11-08

標籤手把手發佈一個依賴類型高質量鍵盤 npm 欄目設計模式简体版

原文原文鏈接

寫在前面

沒有發佈過npm包的同窗，可能會對NPM對開發有一種蜜汁敬畏，以爲這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發過npm包，當時只用過還沒寫過，我想應該挺難的，就小聲說了沒有，而後就讓我回去了o(╯□╰)o。css

其實，在如今的我看來，npm包就是一個咱們平時常常寫的一個export出來的模塊而已，只不過跟其它業務代碼耦合性低，具備較高的獨立性。html

固然，要發佈一個npm包，除了寫的模塊組件外，還須要作一些基礎的包裝工做。下面我就以最近開發的「DigitalKeyboard 數字鍵盤 NPM」爲例，一一列出具體步驟：node

寫基礎模塊代碼；
註冊npm帳號；
配置package.json；
配置webpack；
添加單元測試；
完善README.md；
發佈

一、二、3足能夠完成一個npm，四、五、6是爲了開發一個高質量的npm。webpack

開始

具體代碼移步github，請反手 給個 ★ Star ^_~。完整目錄結構以下：git

├── 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.lockgithub

基礎模塊代碼

如今只須要看src目錄下的三個文件。其中，main.js 主要是對將要開發模塊的引用，只需存在於開發階段，同時做爲此階段webpack的入口文件，核心代碼在Keyboard.js。web

這裏，主要用的是ES6的class和export default，Keyboard的核心思想就是點擊哪一個鍵就對外輸出什麼內容，實現也比較簡單，你們都能看得懂，這裏就不展開講了，具體能夠看github 源碼。面試

註冊npm帳號

這一步也不用說，你們直接去官網註冊就行了。shell

配置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

到這裏，一個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官網，經過搜索包名或者在我的中心看到剛剛發佈的包。