www.simbawu.com/article/search/12
寫在前面
沒有發佈過npm包的同學,可能會對NPM對開發有一種蜜汁敬畏,覺得這是一個很高大上的東西。甚至有次面試,面試官問我有沒有發過npm包,當時只用過還沒寫過,我想應該挺難的,就小聲說了沒有,然後就讓我回去了o(╯□╰)o。
其實,在現在的我看來,npm包就是一個我們平時經常寫的一個export出來的模塊而已,只不過跟其它業務代碼耦合性低,具有較高的獨立性。
當然,要發佈一個npm包,除了寫的模塊組件外,還需要做一些基礎的包裝工作。下面我就以最近開發的「DigitalKeyboard 數字鍵盤 NPM」 為例,一一列出具體步驟:
1、寫基礎模塊代碼;
2、註冊npm賬號;
3、配置package.json;
4、配置webpack;
5、添加單元測試;
6、完善README.md;
7、發佈
1、2、3足可以完成一個npm,4、5、6是為了開發一個高質量的npm。
開始
具體代碼移步github(https://github.com/simbawus/DigitalKeyboard),請反手 給個 ★ Star ^_~。完整目錄結構如下:
基礎模塊代碼
現在只需要看src目錄下的三個文件。其中,main.js 主要是對將要開發模塊的引用,只需存在於開發階段,同時作為此階段webpack的入口文件,核心代碼在Keyboard.js。
這裡,主要用的是ES6的class和export default,Keyboard的核心思想就是點擊哪個鍵就對外輸出什麼內容,實現也比較簡單,大家都能看得懂,這裡就不展開講了,具體可以看github 源碼。
註冊npm賬號
這一步也不用說,大家直接去官網註冊就好了。
配置package.json
<code>{
"name": "digital-keyboard",
"version": "1.0.0",
"main": "build/Keyboard.js",
"repository": "https://github.com/simbawus/DigitalKeyboard.git",
"author": "simbawu <connect>",
"description": "DigitalKeyboard Component",
"keywords": [
"DigitalKeyboard",
"Digital",
"Keyboard",
]
}/<connect>/<code>
此時的配置文件也比較簡單,只需配置npm包名,準備用的名字現在npm搜索一下,已經存在的就不能用了;版本號version,每次發佈版本號都需要更新,不然發佈不成功;對外export的文件路徑,這裡我用的是webpack打包後的文件,如果不用webpack,直接引用src/Keyboard.js也可以,只不過要做模塊化方式兼容,這個後面說。也可以放上項目所在github地址及作者名,description和keywords比較利於SEO,不過這些都不是必需項。
到這裡,一個npm包就開發完成了,直接發佈即可使用。但是,略顯粗糙:代碼壓縮、單元測試、readme都沒寫,別人不知道怎麼用也不敢用。下面一步步完善。
配置webpack
這裡用的是最新版的webpack4,官方提供production和development兩種開發模式,並分別做了默認壓縮處理,非常適合這裡。有兩點要特別說明下:
其他就不展開講了,我的webpack配置結構很清晰,歡迎大家直接copy。
<code>├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js/<code>
添加單元測試
大家經常看到很多不錯的項目都有
,這就像一個證明可用性的證書,給人安全感和信任感,所以添加單元測試,還是很有必要的,同時也可以提高代碼質量。先介紹需要用到的幾個概念:
這裡介紹下jsdom的用法,當時按照幾個文檔來都跑不通:
首先引入jsdom,然後構造一個document,並引入其中的window對象然後一一賦值給node的global對象。其實也很簡單,只不過第一次接觸,而且找的文檔寫的也不清楚,所以花了點時間。其他幾個文檔都還不錯,可以看看文檔再看看我是怎麼用的。此時的package.json就很很豐富了,可以執行yarn test和yarn cover看看測試是否通過及測試覆蓋率。
完善README.md
一個好的readme是決定用戶用不用你項目的關鍵因素,所以要多花點心思,千萬不能忽略。
發佈
<code>#先登錄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是包的版本號/<code>
接下來,我們可以在npm官網,通過搜索包名或者在個人中心看到剛剛發佈的包。