国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

手把手教你發(fā)布一個無依賴多類型高質(zhì)量的鍵盤npm包

vboy1010 / 1970人閱讀

摘要：下面我就以最近開發(fā)的數(shù)字鍵盤為例，一一列出具體步驟寫基礎(chǔ)模塊代碼注冊賬號配置配置添加單元測試完善發(fā)布足可以完成一個，是為了開發(fā)一個高質(zhì)量的?；照路謩e表示是否構(gòu)建成功代碼測試覆蓋率版本號下載量開源證書，看起來逼格滿滿有木有。

寫在前面

沒有發(fā)布過npm包的同學(xué)，可能會對NPM對開發(fā)有一種蜜汁敬畏，覺得這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發(fā)過npm包，當(dāng)時只用過還沒寫過，我想應(yīng)該挺難的，就小聲說了沒有，然后就讓我回去了o(╯□╰)o。

其實，在現(xiàn)在的我看來，npm包就是一個我們平時經(jīng)常寫的一個export出來的模塊而已，只不過跟其它業(yè)務(wù)代碼耦合性低，具有較高的獨立性。

當(dāng)然，要發(fā)布一個npm包，除了寫的模塊組件外，還需要做一些基礎(chǔ)的包裝工作。下面我就以最近開發(fā)的「DigitalKeyboard 數(shù)字鍵盤 NPM」 為例，一一列出具體步驟：

寫基礎(chǔ)模塊代碼；

注冊npm賬號；

配置package.json；

配置webpack；

添加單元測試；

完善README.md；

發(fā)布

1、2、3足可以完成一個npm，4、5、6是為了開發(fā)一個高質(zhì)量的npm。

開始

具體代碼移步github，請反手 給個 ★ 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

基礎(chǔ)模塊代碼

現(xiàn)在只需要看src目錄下的三個文件。其中，main.js 主要是對將要開發(fā)模塊的引用，只需存在于開發(fā)階段，同時作為此階段webpack的入口文件，核心代碼在Keyboard.js。

這里，主要用的是ES6的class和export default，Keyboard的核心思想就是點擊哪個鍵就對外輸出什么內(nèi)容，實現(xiàn)也比較簡單，大家都能看得懂，這里就不展開講了，具體可以看github 源碼。

注冊npm賬號

這一步也不用說，大家直接去官網(wǎng)注冊就好了。

配置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",
  ]
}

此時的配置文件也比較簡單，只需配置npm包名，準(zhǔn)備用的名字現(xiàn)在npm搜索一下，已經(jīng)存在的就不能用了；版本號version，每次發(fā)布版本號都需要更新，不然發(fā)布不成功；對外export的文件路徑，這里我用的是webpack打包后的文件，如果不用webpack，直接引用src/Keyboard.js也可以，只不過要做模塊化方式兼容，這個后面說。也可以放上項目所在github地址及作者名，description和keywords比較利于SEO，不過這些都不是必需項。

到這里，一個npm包就開發(fā)完成了，直接發(fā)布即可使用。但是，略顯粗糙：代碼壓縮、單元測試、readme都沒寫，別人不知道怎么用也不敢用。下面一步步完善。

配置webpack

這里用的是最新版的webpack4，官方提供production和development兩種開發(fā)模式，并分別做了默認(rèn)壓縮處理，非常適合這里。有兩點要特別說明下：

libraryTarget: "umd"

umd有的同學(xué)可能不是太熟悉，但是cmd、amd大家應(yīng)該都知道，分別應(yīng)用于服務(wù)端和瀏覽器端的模塊方案。umd就是前面提到的模塊化方式兼容。感興趣可以參考我的另一篇文章JavaScript Module 設(shè)計解析及總結(jié)。

production和development的entry不一樣：

development的entry是main.js，而production的entry是Keyboard.js。前面說過，開發(fā)階段需要有對模塊的引用，但是正式發(fā)布就不需要了，所以要分別配置。

其他就不展開講了，我的webpack配置結(jié)構(gòu)很清晰，歡迎大家直接copy。

├── webpack.base.config.js
├── webpack.config.js
├── webpack.dev.config.js
└── webpack.prod.config.js

添加單元測試

大家經(jīng)?？吹胶芏嗖诲e的項目都有，這就像一個證明可用性的證書，給人安全感和信任感，所以添加單元測試，還是很有必要的，同時也可以提高代碼質(zhì)量。先介紹需要用到的幾個概念：

mocha：測試框架；

chai：斷言庫，斷言通俗來講就是判斷代碼結(jié)果對不對；

jsdom：node端是沒有js dom對象的，比如window、document等等，所以需要這個庫提供；

istanbul：代碼覆蓋率計算工具；

coveralls：統(tǒng)計上面的代碼測試覆蓋率工具；

travis-ci：自動集成，比如master代碼push到github上之后，travis-ci就會自動進行自動化測試。

這里介紹下jsdom的用法，當(dāng)時按照幾個文檔來都跑不通：

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)造一個document，并引入其中的window對象然后一一賦值給node的global對象。其實也很簡單，只不過第一次接觸，而且找的文檔寫的也不清楚，所以花了點時間。其他幾個文檔都還不錯，可以看看文檔再看看我是怎么用的。此時的package.json就很很豐富了，可以執(zhí)行yarn test和yarn cover看看測試是否通過及測試覆蓋率。

完善README.md

一個好的readme是決定用戶用不用你項目的關(guān)鍵因素，所以要多花點心思，千萬不能忽略。

標(biāo)題：直觀的描述這個項目是干什么的。

徽章：





分別表示是否構(gòu)建成功、代碼測試覆蓋率、npm版本號、下載量、開源證書，看起來逼格滿滿有木有。推薦去shields io 添加，生成一次，之后會自動更新，不過需要等npm發(fā)布后才能搜到。

配圖：要讓用戶直觀的看到這個組件長什么樣，是否滿足他的需求。

API介紹：不能讓用戶猜。

使用示例：盡量降低使用門檻。

發(fā)布 
#先登錄NPM賬號：
npm login

#會依次讓你輸入用戶名、密碼、和郵箱
Username: simbawu        
Password:
Email: (this IS public) wsbin610@163.com

#登錄成功會出現(xiàn)以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.

#執(zhí)行發(fā)布命令：
npm publish

#發(fā)布成功后會出現(xiàn)以下提示信息：
+ digital-keyboard@1.0.0
#這里digital-keyboard是我的NPM包名，1.0.0是包的版本號

接下來，我們可以在npm官網(wǎng)，通過搜索包名或者在個人中心看到剛剛發(fā)布的包。

歡迎討論，點個贊再走吧～

文章同步于以下社區(qū)，可以選一個關(guān)注我噢 ?????

simbawu | github | segmentfault | 知乎 | 簡書 | 掘金

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95137.html

相關(guān)文章

  • 手把手教你寫命令行工具

    摘要：命令行工具，即。我們在寫命令行工具的時候，需要指定一個可執(zhí)行文件?；蛘咚恼{(diào)試我們?nèi)职惭b一個包后，可以全局調(diào)用這個命令行工具。 命令行工具，即 Cli(command-line interface)。是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標(biāo)，用戶通過鍵盤輸入指令，計算機接收到指令后，予以執(zhí)行。在學(xué)習(xí)這篇教程之前，你需要先了解NodeJs,NPM和一些常用的...

    DevYK 評論0 收藏0

  • 手把手教你擼一個 Webpack Loader

    摘要：夾在中間的被鏈?zhǔn)秸{(diào)用，他們拿到上個的返回值，為下一個提供輸入。最終把返回值和傳給。前面我們說過，也是一個模塊，它導(dǎo)出一個函數(shù)，該函數(shù)的參數(shù)是的源模塊，處理后把返回值交給下一個。 文：小 boy（滬江網(wǎng)校Web前端工程師）本文原創(chuàng)，轉(zhuǎn)載請注明作者及出處 showImg(https://segmentfault.com/img/remote/1460000012990131?w=1083...

    sugarmo 評論0 收藏0

  • 手把手教你用typescript擼一個npm包

    摘要：但是如果將我們的包還沒有測試好，直接發(fā)到遠程未免顯得有點笨拙。發(fā)包創(chuàng)建文件在發(fā)包之前排除一些沒有必要發(fā)的文件注冊，就按照提示依次填寫信息就好了發(fā)布由于本人學(xué)識有限，有很多需要提升的地方，望大家多多指教。 創(chuàng)建一個項目目錄 mkdir project 創(chuàng)建package.json npm init 配置tsconfig.json npm -i typescript -g //全局安...

    ZHAO_ 評論0 收藏0

  • 手把手發(fā)布一個npm包及相關(guān)注意事項

    摘要：前言這里是發(fā)布包的具體步驟，手把手教會，相關(guān)原理在其他文章下面有原理好文章指路分鐘教你快速開發(fā)一個插件并發(fā)布手把手教你封裝一個發(fā)布之前，需要注冊一個賬號這里注冊具體步驟新建項目如需安裝代碼下面新建一個文件夾。 前言 這里是發(fā)布npm包的具體步驟，手把手教會，相關(guān)原理在其他文章下面有原理好文章指路10分鐘教你快速開發(fā)一個vue插件并發(fā)布npm 手把手教你封裝一個 vue componen...

    ZoomQuiet 評論0 收藏0

  • 手把手教你結(jié)合commitizen 搭建屬于自己的項目git commit 校驗工具

    摘要：其實有點耗時間，所以我們做了一下自動化初步自動化修改中的初始化將部分腳本寫入到中詢問是否全部使用是否默認(rèn)使用開始安裝依賴正在安裝正在安裝清除掉以前配置的只要兩部安裝即可提交代碼的時候直接執(zhí)行即可更智能摸索中 先丟出最終版的index.js文件內(nèi)容 #!/usr/bin/env node use strict; const path = require(path); const edit...

    kel 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<