摘要:下面我就以最近開發(fā)的數(shù)字鍵盤為例,一一列出具體步驟寫基礎(chǔ)模塊代碼注冊(cè)賬號(hào)配置配置添加單元測(cè)試完善發(fā)布足可以完成一個(gè),是為了開發(fā)一個(gè)高質(zhì)量的。徽章分別表示是否構(gòu)建成功代碼測(cè)試覆蓋率版本號(hào)下載量開源證書,看起來逼格滿滿有木有。
寫在前面
沒有發(fā)布過npm包的同學(xué),可能會(huì)對(duì)NPM對(duì)開發(fā)有一種蜜汁敬畏,覺得這是一個(gè)很高大上的東西。甚至有次面試,面試官問我有沒有發(fā)過npm包,當(dāng)時(shí)只用過還沒寫過,我想應(yīng)該挺難的,就小聲說了沒有,然后就讓我回去了o(╯□╰)o。
其實(shí),在現(xiàn)在的我看來,npm包就是一個(gè)我們平時(shí)經(jīng)常寫的一個(gè)export出來的模塊而已,只不過跟其它業(yè)務(wù)代碼耦合性低,具有較高的獨(dú)立性。
當(dāng)然,要發(fā)布一個(gè)npm包,除了寫的模塊組件外,還需要做一些基礎(chǔ)的包裝工作。下面我就以最近開發(fā)的「DigitalKeyboard 數(shù)字鍵盤 NPM」 為例,一一列出具體步驟:
寫基礎(chǔ)模塊代碼;
注冊(cè)npm賬號(hào);
配置package.json;
配置webpack;
添加單元測(cè)試;
完善README.md;
發(fā)布
1、2、3足可以完成一個(gè)npm,4、5、6是為了開發(fā)一個(gè)高質(zhì)量的npm。
開始具體代碼移步github,請(qǐng)反手 給個(gè) ★ 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
現(xiàn)在只需要看src目錄下的三個(gè)文件。其中,main.js 主要是對(duì)將要開發(fā)模塊的引用,只需存在于開發(fā)階段,同時(shí)作為此階段webpack的入口文件,核心代碼在Keyboard.js。
這里,主要用的是ES6的class和export default,Keyboard的核心思想就是點(diǎn)擊哪個(gè)鍵就對(duì)外輸出什么內(nèi)容,實(shí)現(xiàn)也比較簡(jiǎn)單,大家都能看得懂,這里就不展開講了,具體可以看github 源碼。
注冊(cè)npm賬號(hào)這一步也不用說,大家直接去官網(wǎng)注冊(cè)就好了。
配置package.json{ "name": "digital-keyboard", "version": "1.0.0", "main": "build/Keyboard.js", "repository": "https://github.com/simbawus/DigitalKeyboard.git", "author": "simbawu", "description": "DigitalKeyboard Component", "keywords": [ "DigitalKeyboard", "Digital", "Keyboard", ] }
此時(shí)的配置文件也比較簡(jiǎn)單,只需配置npm包名,準(zhǔn)備用的名字現(xiàn)在npm搜索一下,已經(jīng)存在的就不能用了;版本號(hào)version,每次發(fā)布版本號(hào)都需要更新,不然發(fā)布不成功;對(duì)外export的文件路徑,這里我用的是webpack打包后的文件,如果不用webpack,直接引用src/Keyboard.js也可以,只不過要做模塊化方式兼容,這個(gè)后面說。也可以放上項(xiàng)目所在github地址及作者名,description和keywords比較利于SEO,不過這些都不是必需項(xiàng)。
到這里,一個(gè)npm包就開發(fā)完成了,直接發(fā)布即可使用。但是,略顯粗糙:代碼壓縮、單元測(cè)試、readme都沒寫,別人不知道怎么用也不敢用。下面一步步完善。
配置webpack這里用的是最新版的webpack4,官方提供production和development兩種開發(fā)模式,并分別做了默認(rèn)壓縮處理,非常適合這里。有兩點(diǎn)要特別說明下:
libraryTarget: "umd"
umd有的同學(xué)可能不是太熟悉,但是cmd、amd大家應(yīng)該都知道,分別應(yīng)用于服務(wù)端和瀏覽器端的模塊方案。umd就是前面提到的模塊化方式兼容。感興趣可以參考我的另一篇文章JavaScript Module 設(shè)計(jì)解析及總結(jié)。
production和development的entry不一樣:
development的entry是main.js,而production的entry是Keyboard.js。前面說過,開發(fā)階段需要有對(duì)模塊的引用,但是正式發(fā)布就不需要了,所以要分別配置。
其他就不展開講了,我的webpack配置結(jié)構(gòu)很清晰,歡迎大家直接copy。
├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js
大家經(jīng)??吹胶芏嗖诲e(cuò)的項(xiàng)目都有,這就像一個(gè)證明可用性的證書,給人安全感和信任感,所以添加單元測(cè)試,還是很有必要的,同時(shí)也可以提高代碼質(zhì)量。先介紹需要用到的幾個(gè)概念:
mocha:測(cè)試框架;
chai:斷言庫(kù),斷言通俗來講就是判斷代碼結(jié)果對(duì)不對(duì);
jsdom:node端是沒有js dom對(duì)象的,比如window、document等等,所以需要這個(gè)庫(kù)提供;
istanbul:代碼覆蓋率計(jì)算工具;
coveralls:統(tǒng)計(jì)上面的代碼測(cè)試覆蓋率工具;
travis-ci:自動(dòng)集成,比如master代碼push到github上之后,travis-ci就會(huì)自動(dòng)進(jìn)行自動(dòng)化測(cè)試。
這里介紹下jsdom的用法,當(dāng)時(shí)按照幾個(gè)文檔來都跑不通:
const {JSDOM} = require("jsdom"); const {window} = new JSDOM(`數(shù)字鍵盤 `); 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)造一個(gè)document,并引入其中的window對(duì)象然后一一賦值給node的global對(duì)象。其實(shí)也很簡(jiǎn)單,只不過第一次接觸,而且找的文檔寫的也不清楚,所以花了點(diǎn)時(shí)間。其他幾個(gè)文檔都還不錯(cuò),可以看看文檔再看看我是怎么用的。此時(shí)的package.json就很很豐富了,可以執(zhí)行yarn test和yarn cover看看測(cè)試是否通過及測(cè)試覆蓋率。
完善README.md一個(gè)好的readme是決定用戶用不用你項(xiàng)目的關(guān)鍵因素,所以要多花點(diǎn)心思,千萬不能忽略。
標(biāo)題:直觀的描述這個(gè)項(xiàng)目是干什么的。
徽章:
分別表示是否構(gòu)建成功、代碼測(cè)試覆蓋率、npm版本號(hào)、下載量、開源證書,看起來逼格滿滿有木有。推薦去shields io 添加,生成一次,之后會(huì)自動(dòng)更新,不過需要等npm發(fā)布后才能搜到。
配圖:要讓用戶直觀的看到這個(gè)組件長(zhǎng)什么樣,是否滿足他的需求。
API介紹:不能讓用戶猜。
使用示例:盡量降低使用門檻。
發(fā)布#先登錄NPM賬號(hào): npm login #會(huì)依次讓你輸入用戶名、密碼、和郵箱 Username: simbawu Password: Email: (this IS public) [email protected] #登錄成功會(huì)出現(xiàn)以下提示信息: Logged in as simbawu on https://registry.npmjs.org/. #執(zhí)行發(fā)布命令: npm publish #發(fā)布成功后會(huì)出現(xiàn)以下提示信息: + [email protected] #這里digital-keyboard是我的NPM包名,1.0.0是包的版本號(hào)
接下來,我們可以在npm官網(wǎng),通過搜索包名或者在個(gè)人中心看到剛剛發(fā)布的包。
歡迎討論,點(diǎn)個(gè)贊再走吧~文章同步于以下社區(qū),可以選一個(gè)關(guān)注我噢 ?????
simbawu | github | segmentfault | 知乎 | 簡(jiǎn)書 | 掘金
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/95137.html
摘要:命令行工具,即。我們?cè)趯懨钚泄ぞ叩臅r(shí)候,需要指定一個(gè)可執(zhí)行文件。或者四調(diào)試我們?nèi)职惭b一個(gè)包后,可以全局調(diào)用這個(gè)命令行工具。 命令行工具,即 Cli(command-line interface)。是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面,它通常不支持鼠標(biāo),用戶通過鍵盤輸入指令,計(jì)算機(jī)接收到指令后,予以執(zhí)行。在學(xué)習(xí)這篇教程之前,你需要先了解NodeJs,NPM和一些常用的...
摘要:夾在中間的被鏈?zhǔn)秸{(diào)用,他們拿到上個(gè)的返回值,為下一個(gè)提供輸入。最終把返回值和傳給。前面我們說過,也是一個(gè)模塊,它導(dǎo)出一個(gè)函數(shù),該函數(shù)的參數(shù)是的源模塊,處理后把返回值交給下一個(gè)。 文:小 boy(滬江網(wǎng)校Web前端工程師)本文原創(chuàng),轉(zhuǎn)載請(qǐng)注明作者及出處 showImg(https://segmentfault.com/img/remote/1460000012990131?w=1083...
摘要:但是如果將我們的包還沒有測(cè)試好,直接發(fā)到遠(yuǎn)程未免顯得有點(diǎn)笨拙。發(fā)包創(chuàng)建文件在發(fā)包之前排除一些沒有必要發(fā)的文件注冊(cè),就按照提示依次填寫信息就好了發(fā)布由于本人學(xué)識(shí)有限,有很多需要提升的地方,望大家多多指教。 創(chuàng)建一個(gè)項(xiàng)目目錄 mkdir project 創(chuàng)建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...
摘要:前言這里是發(fā)布包的具體步驟,手把手教會(huì),相關(guān)原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個(gè)插件并發(fā)布手把手教你封裝一個(gè)發(fā)布之前,需要注冊(cè)一個(gè)賬號(hào)這里注冊(cè)具體步驟新建項(xiàng)目如需安裝代碼下面新建一個(gè)文件夾。 前言 這里是發(fā)布npm包的具體步驟,手把手教會(huì),相關(guān)原理在其他文章下面有原理好文章指路10分鐘教你快速開發(fā)一個(gè)vue插件并發(fā)布npm 手把手教你封裝一個(gè) vue componen...
摘要:其實(shí)有點(diǎn)耗時(shí)間,所以我們做了一下自動(dòng)化初步自動(dòng)化修改中的初始化將部分腳本寫入到中詢問是否全部使用是否默認(rèn)使用開始安裝依賴正在安裝正在安裝清除掉以前配置的只要兩部安裝即可提交代碼的時(shí)候直接執(zhí)行即可更智能摸索中 先丟出最終版的index.js文件內(nèi)容 #!/usr/bin/env node use strict; const path = require(path); const edit...
閱讀 2480·2021-09-27 13:36
閱讀 2171·2019-08-29 18:47
閱讀 2140·2019-08-29 15:21
閱讀 1404·2019-08-29 11:14
閱讀 1989·2019-08-28 18:29
閱讀 1633·2019-08-28 18:04
閱讀 581·2019-08-26 13:58
閱讀 3217·2019-08-26 12:12