成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

怎么開(kāi)發(fā)并發(fā)布一個(gè)可用的 JavaScript 模塊 ？

TANKING / 992人閱讀

摘要：但是，我們發(fā)布之前，需要做一些持續(xù)集成和單元測(cè)試，用來(lái)保證代碼的正確性，穩(wěn)定性。

Javascript 那么流行，作為一個(gè)前端開(kāi)發(fā)者，或者前端入門(mén)者，發(fā)布一個(gè)正式可用的 Javascript 模塊，對(duì)于自己來(lái)說(shuō)應(yīng)該成長(zhǎng)很大。下面就以一個(gè)簡(jiǎn)單的 Javascript 模塊 filesize.js 來(lái)介紹 github、travis-ci、npm 這些內(nèi)容的組合使用。

一、目標(biāo)概覽

本文將使用 filesize.js 這個(gè)作為介紹，這個(gè)是一個(gè)非常簡(jiǎn)單的 js 庫(kù)，總共代碼也不到 20 行，但是功能完善，可以生產(chǎn)使用。事實(shí)上 npm 上有不少簡(jiǎn)單到幾行代碼搞定的模塊。

首先發(fā)布一個(gè) js 模塊，肯定需要時(shí)代碼開(kāi)源，所以必須使用到 Github 作為代碼管理。發(fā)布到 npm 能不能不開(kāi)源呢，當(dāng)然可以，但npm install 得到之后就是你的源碼。

發(fā)布一個(gè) js 模塊，需要讓別人使用，良好的測(cè)試必不可少（很多項(xiàng)目有下圖的綠色小圖標(biāo)），所以需要給你的項(xiàng)目寫(xiě)完善的測(cè)試用例（testcase），然后利用 Github 上第三方的 ci 工具來(lái)執(zhí)行，travis-ci 就是其中一個(gè)用的比較多的。

代碼測(cè)試完畢，沒(méi)有任何問(wèn)題之后，可以 npm 發(fā)布模塊了。

我們 filesize.js 達(dá)到的效果就是這樣的：

并且可以直接 npm install filesize.js 安裝下載。下面分別介紹說(shuō)明。

二、Github 項(xiàng)目初始化

首先在 Github 上創(chuàng)建項(xiàng)目，注意想好項(xiàng)目的名字，名字最好能夠和之后 npm 發(fā)布的模塊名字相同（npm 模塊名字不能和其他人已經(jīng)發(fā)布的名字重復(fù)）。后面關(guān)于 Github 如果提交代碼這些請(qǐng)自行找其他文章學(xué)習(xí)。

需要強(qiáng)調(diào)的是：

注意完善的 README.md 文檔，可以文檔先行，這樣可以在寫(xiě)代碼之前想好你這個(gè)模塊的 API 方法等。

可以嘗試先寫(xiě) testcase（測(cè)試先行），當(dāng)然不強(qiáng)制，提前寫(xiě) case，無(wú)法運(yùn)行測(cè)試其實(shí)也挺耗時(shí)的。

注意整理代碼結(jié)構(gòu)，對(duì)于 js 模塊代碼，一般是:

package.json 是 npm 模塊相關(guān)的配置；

glupfile.js 是 glup 的配置文件，我這里主要用來(lái)壓縮代碼；

README.md 文檔說(shuō)明；

.gitignore 忽略 git 版本管理的文件和目錄（一些無(wú)關(guān)緊要的全部不要上傳 git）；

.travis.yml travis-ci配置文件，后面會(huì)說(shuō)。

三、Javascript 模塊 & npm

對(duì)于一個(gè) js 模塊，都有 package.json 文件，這個(gè)是一個(gè)嚴(yán)格要求的 json 格式，任何不符合要求的都會(huì)在執(zhí)行 npm 命令的時(shí)候報(bào)錯(cuò)。比如 filesize.js 的該文件內(nèi)容如下：

這其中比較重要的就是 name/officialName、keywords、devDependencies、dependencies、scripts、main、version；

name：npm 發(fā)布之后的名字，一般和前述 github 項(xiàng)目名字保持一致，且不能和已有的 npm 模塊重名；

keywords：npm 模塊的關(guān)鍵字，用于在 npmjs.com 上檢索；

devDependencies：開(kāi)發(fā)依賴(lài)，比如會(huì)用到 glup 壓縮混淆，tape 進(jìn)行單元測(cè)試，jshint 進(jìn)行靜態(tài)代碼檢查；這些都是開(kāi)發(fā)過(guò)程中需要的依賴(lài)，非開(kāi)發(fā)環(huán)境可以不用安裝；

dependencies：模塊的依賴(lài)庫(kù)，用戶(hù)在使用你的這個(gè)模塊的時(shí)候，也會(huì)附帶進(jìn)行安裝下載；filesize.js模塊很簡(jiǎn)單，并沒(méi)有任何依賴(lài)。

scripts：配置一些指令，比如：npm run lint，npm run test，npm run build：分別是代碼檢查，執(zhí)行測(cè)試用例，build 壓縮庫(kù)

main：這個(gè)是 package.json 中非常重要的配置，標(biāo)志引用這個(gè)模塊的入口在哪里；

version：模塊的版本，每次發(fā)布的時(shí)候，比如保證版本不一樣。

除了這些配置，package.json 還有其他的更多配置，大家可以去搜索學(xué)習(xí)一下，一般有了這些配置項(xiàng)，就夠了，就可以進(jìn)行 npm publish 來(lái)發(fā)布模塊。

但是，我們發(fā)布之前，需要做一些持續(xù)集成和單元測(cè)試，用來(lái)保證代碼的正確性，穩(wěn)定性。這個(gè)就是使用到 travis-ci 了。

四、接入 travis-ci 持續(xù)集成

持續(xù)集成是什么？簡(jiǎn)單來(lái)說(shuō)就是盡快，盡可能早的進(jìn)行代碼的正確性驗(yàn)證（也就是測(cè)試），那么我們每次在 github push代碼的時(shí)候就運(yùn)行一下測(cè)試用例，這個(gè)是不是很快，很早，也就是持續(xù)集成，對(duì)于一些簡(jiǎn)單的 js 模塊，我們做一些簡(jiǎn)單的單元測(cè)試就夠夠的了。

在 github 創(chuàng)建項(xiàng)目之后，可以打開(kāi) https://travis-ci.org/，并使用 Github 授權(quán)登陸，然后自己的 Account 菜單中勾上需要接入 travis-ci 的項(xiàng)目，如下圖所示：

如果看不到新創(chuàng)建的項(xiàng)目，可以右上角刷新一下。開(kāi)啟之后，travis-ci 會(huì) hook 住你 git push 命令，然后根據(jù)你項(xiàng)目中的 .travis.yml 配置文件來(lái)執(zhí)行 npm test（npm run test 的簡(jiǎn)寫(xiě)）進(jìn)行測(cè)試，并捕獲檢測(cè)結(jié)果來(lái)判斷 測(cè)試用例 執(zhí)行成功與否。例如 filesize.js的 .travis.yml 配置如下所示：

表示執(zhí)行在 nodejs 環(huán)境，兩個(gè)不同的大版本分別執(zhí)行以下，一般選擇 4.x 版本即可。那么每次 push 代碼之后，都會(huì)進(jìn)行自動(dòng)觸發(fā) ci 任務(wù)，如下圖所示：

然后你就可以把這個(gè)小綠色圖表放到你的 README.md 文件中了。

五、發(fā)布 publish

項(xiàng)目創(chuàng)建了，package.json 配置好了，代碼寫(xiě)完了，文檔完善了，ci 執(zhí)行沒(méi)有錯(cuò)誤了，那么就可以發(fā)布出去了。怎么發(fā)布，非常簡(jiǎn)單，如果你沒(méi)有 https://www.npmjs.com/ 的賬號(hào)，注冊(cè)一個(gè)就好了，和一般的網(wǎng)站注冊(cè)并沒(méi)有什么區(qū)別。

有了賬號(hào)之后，在項(xiàng)目代碼根目錄，執(zhí)行：

npm publish

控制臺(tái)會(huì)要求你輸入 npmjs 網(wǎng)站的郵箱和密碼，輸入即可，然后等著出現(xiàn) 發(fā)布成功即可，一般出現(xiàn)：[email protected] 這樣格式的字符串即可，然后去 npmjs 網(wǎng)站刷一下試試看。

六、其他

如果你做了一個(gè)很好用的有創(chuàng)意的模塊，可以給你的模塊做一個(gè)簡(jiǎn)單炫酷的主頁(yè)來(lái)顯示用法和 API 接口吧。本文中作為示例的項(xiàng)目 filesize.js 是一個(gè)超級(jí)大輪子，就是為了寫(xiě)這篇文章而做了，當(dāng)然也可以用戶(hù)開(kāi)發(fā)生成環(huán)境。

最后安利一下，我的 Github 主頁(yè)：https://github.com/hustcc，ID是 hustcc，因?yàn)槲沂且粋€(gè)huster，正好之前注冊(cè)了hust.cc域名，所以有了這個(gè) github id 。

有哪些輪子：

莆田系瀏覽器插件: Chrome瀏覽器插件——打開(kāi)莆田系醫(yī)院網(wǎng)站，發(fā)出警告提醒、顯示醫(yī)院信息（莆田系哪一波潮的時(shí)候做的，用戶(hù)量還挺多的）。

timeago.js: timeago.js is a tiny(~1.7kb) library used to format date with *** time ago statement. eg: "3 hours ago". No dependency & localization & tiny.

echarts-for-react: baidu Echarts(v3.0) components for React wrapper. 一個(gè)簡(jiǎn)單的echarts(v3.0)的react封裝。

我是一個(gè)后臺(tái)開(kāi)發(fā)者，最近在入門(mén)前段開(kāi)發(fā)，深度Github、輪子愛(ài)好者。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80473.html

相關(guān)文章

  • 關(guān)于JavaScript, NPM官方發(fā)布了2018年的回顧以及2019年的預(yù)測(cè)

    摘要：不過(guò)，根據(jù)伯克利大學(xué)的這篇文章來(lái)看，擁有豐富的開(kāi)源庫(kù)，是開(kāi)發(fā)者在選擇一門(mén)開(kāi)發(fā)語(yǔ)言時(shí)，最重要的因素。擁有超過(guò)個(gè)可用的開(kāi)源庫(kù)，是目前世界上最大的開(kāi)源庫(kù)集合。月份，我們發(fā)布了。這和年的情況是相反的。在的調(diào)查中，超過(guò)的受訪者表示他們正在使用。 showImg(https://segmentfault.com/img/bVblvke?w=693&h=300); 原文標(biāo)題：This year in...

    dadong 評(píng)論0 收藏0

  • 手把手教你發(fā)布一個(gè)無(wú)依賴(lài)多類(lèi)型高質(zhì)量的鍵盤(pán)npm包

    摘要：下面我就以最近開(kāi)發(fā)的數(shù)字鍵盤(pán)為例，一一列出具體步驟寫(xiě)基礎(chǔ)模塊代碼注冊(cè)賬號(hào)配置配置添加單元測(cè)試完善發(fā)布足可以完成一個(gè)，是為了開(kāi)發(fā)一個(gè)高質(zhì)量的?；照路謩e表示是否構(gòu)建成功代碼測(cè)試覆蓋率版本號(hào)下載量開(kāi)源證書(shū)，看起來(lái)逼格滿滿有木有。 寫(xiě)在前面 沒(méi)有發(fā)布過(guò)npm包的同學(xué)，可能會(huì)對(duì)NPM對(duì)開(kāi)發(fā)有一種蜜汁敬畏，覺(jué)得這是一個(gè)很高大上的東西。甚至有次面試，面試官問(wèn)我有沒(méi)有發(fā)過(guò)npm包，當(dāng)時(shí)只用過(guò)還沒(méi)寫(xiě)過(guò)，...

    vboy1010 評(píng)論0 收藏0

  • 前端模塊化雜談

    摘要：并不是使用安裝的模塊我們就可以使用同樣的方式使用任何一個(gè)模塊，使用某種工具將這些模塊打包發(fā)布作為事實(shí)上的前端模塊化標(biāo)準(zhǔn)，或可以出來(lái)解救我們。目前比較拿的出手的，也就是的模塊化，比如或者等等，分別可以使用和。 Teambition是一家追求卓越技術(shù)的公司，我們工程師都很Geek，我們使用了很多新潮的，開(kāi)源的技術(shù)。同時(shí)我們也貢獻(xiàn)了很多開(kāi)源的項(xiàng)目。我們希望能夠把一些技術(shù)經(jīng)驗(yàn)分享給大家。...

    yacheng 評(píng)論0 收藏0

  • 前端模塊化雜談

    摘要：并不是使用安裝的模塊我們就可以使用同樣的方式使用任何一個(gè)模塊，使用某種工具將這些模塊打包發(fā)布作為事實(shí)上的前端模塊化標(biāo)準(zhǔn)，或可以出來(lái)解救我們。目前比較拿的出手的，也就是的模塊化，比如或者等等，分別可以使用和。 Teambition是一家追求卓越技術(shù)的公司，我們工程師都很Geek，我們使用了很多新潮的，開(kāi)源的技術(shù)。同時(shí)我們也貢獻(xiàn)了很多開(kāi)源的項(xiàng)目。我們希望能夠把一些技術(shù)經(jīng)驗(yàn)分享給大家。...

    li21 評(píng)論0 收藏0

  • PHP小知識(shí)點(diǎn)

    摘要：那些瑣碎的知識(shí)點(diǎn)作者記錄的的很奇特很難記的知識(shí)點(diǎn)。易錯(cuò)知識(shí)點(diǎn)整理注意和的區(qū)別中和都是輸出的作用，但是兩者之間還是有細(xì)微的差別。今天手頭不忙，總結(jié)一下，分享過(guò)程中掌握的知識(shí)點(diǎn)。 深入理解 PHP 之：Nginx 與 FPM 的工作機(jī)制 這篇文章從 Nginx 與 FPM 的工作機(jī)制出發(fā)，探討配置背后的原理，讓我們真正理解 Nginx 與 PHP 是如何協(xié)同工作的。 PHP 那些瑣碎的知識(shí)...

    hover_lew 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<