資訊專欄INFORMATION COLUMN
摘要：但是，我們發(fā)布之前，需要做一些持續(xù)集成和單元測試，用來保證代碼的正確性，穩(wěn)定性。
Javascript 那么流行，作為一個前端開發(fā)者，或者前端入門者，發(fā)布一個正式可用的 Javascript 模塊，對于自己來說應(yīng)該成長很大。下面就以一個簡單的 Javascript 模塊 filesize.js 來介紹 github、travis-ci、npm 這些內(nèi)容的組合使用。
一、目標(biāo)概覽本文將使用 filesize.js 這個作為介紹，這個是一個非常簡單的 js 庫，總共代碼也不到 20 行，但是功能完善，可以生產(chǎn)使用。事實(shí)上 npm 上有不少簡單到幾行代碼搞定的模塊。
首先發(fā)布一個 js 模塊，肯定需要時代碼開源，所以必須使用到 Github 作為代碼管理。發(fā)布到 npm 能不能不開源呢，當(dāng)然可以，但npm install 得到之后就是你的源碼。
發(fā)布一個 js 模塊，需要讓別人使用，良好的測試必不可少（很多項(xiàng)目有下圖的綠色小圖標(biāo)），所以需要給你的項(xiàng)目寫完善的測試用例（testcase），然后利用 Github 上第三方的 ci 工具來執(zhí)行，travis-ci 就是其中一個用的比較多的。
代碼測試完畢，沒有任何問題之后，可以 npm 發(fā)布模塊了。
我們 filesize.js 達(dá)到的效果就是這樣的：
并且可以直接 npm install filesize.js 安裝下載。下面分別介紹說明。
二、Github 項(xiàng)目初始化首先在 Github 上創(chuàng)建項(xiàng)目，注意想好項(xiàng)目的名字，名字最好能夠和之后 npm 發(fā)布的模塊名字相同（npm 模塊名字不能和其他人已經(jīng)發(fā)布的名字重復(fù)）。后面關(guān)于 Github 如果提交代碼這些請自行找其他文章學(xué)習(xí)。
需要強(qiáng)調(diào)的是：
注意完善的 README.md 文檔，可以文檔先行，這樣可以在寫代碼之前想好你這個模塊的 API 方法等。
可以嘗試先寫 testcase（測試先行），當(dāng)然不強(qiáng)制，提前寫 case，無法運(yùn)行測試其實(shí)也挺耗時的。
注意整理代碼結(jié)構(gòu)，對于 js 模塊代碼，一般是:
package.json 是 npm 模塊相關(guān)的配置；
glupfile.js 是 glup 的配置文件，我這里主要用來壓縮代碼；
README.md 文檔說明；
.gitignore 忽略 git 版本管理的文件和目錄（一些無關(guān)緊要的全部不要上傳 git）；
.travis.yml travis-ci配置文件，后面會說。
三、Javascript 模塊 & npm對于一個 js 模塊，都有 package.json 文件，這個是一個嚴(yán)格要求的 json 格式，任何不符合要求的都會在執(zhí)行 npm 命令的時候報錯。比如 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：開發(fā)依賴，比如會用到 glup 壓縮混淆，tape 進(jìn)行單元測試，jshint 進(jìn)行靜態(tài)代碼檢查；這些都是開發(fā)過程中需要的依賴，非開發(fā)環(huán)境可以不用安裝；
dependencies：模塊的依賴庫，用戶在使用你的這個模塊的時候，也會附帶進(jìn)行安裝下載；filesize.js模塊很簡單，并沒有任何依賴。
scripts：配置一些指令，比如：npm run lint，npm run test，npm run build：分別是代碼檢查，執(zhí)行測試用例，build 壓縮庫
main：這個是 package.json 中非常重要的配置，標(biāo)志引用這個模塊的入口在哪里；
version：模塊的版本，每次發(fā)布的時候，比如保證版本不一樣。
除了這些配置，package.json 還有其他的更多配置，大家可以去搜索學(xué)習(xí)一下，一般有了這些配置項(xiàng)，就夠了，就可以進(jìn)行 npm publish 來發(fā)布模塊。
但是，我們發(fā)布之前，需要做一些持續(xù)集成和單元測試，用來保證代碼的正確性，穩(wěn)定性。這個就是使用到 travis-ci 了。
四、接入 travis-ci 持續(xù)集成持續(xù)集成是什么？簡單來說就是盡快，盡可能早的進(jìn)行代碼的正確性驗(yàn)證（也就是測試），那么我們每次在 github push代碼的時候就運(yùn)行一下測試用例，這個是不是很快，很早，也就是持續(xù)集成，對于一些簡單的 js 模塊，我們做一些簡單的單元測試就夠夠的了。
在 github 創(chuàng)建項(xiàng)目之后，可以打開 https://travis-ci.org/，并使用 Github 授權(quán)登陸，然后自己的 Account 菜單中勾上需要接入 travis-ci 的項(xiàng)目，如下圖所示：
如果看不到新創(chuàng)建的項(xiàng)目，可以右上角刷新一下。開啟之后，travis-ci 會 hook 住你 git push 命令，然后根據(jù)你項(xiàng)目中的 .travis.yml 配置文件來執(zhí)行 npm test（npm run test 的簡寫）進(jìn)行測試，并捕獲檢測結(jié)果來判斷 測試用例 執(zhí)行成功與否。例如 filesize.js的 .travis.yml 配置如下所示：
表示執(zhí)行在 nodejs 環(huán)境，兩個不同的大版本分別執(zhí)行以下，一般選擇 4.x 版本即可。那么每次 push 代碼之后，都會進(jìn)行自動觸發(fā) ci 任務(wù)，如下圖所示：
然后你就可以把這個小綠色圖表放到你的 README.md 文件中了。
五、發(fā)布 publish項(xiàng)目創(chuàng)建了，package.json 配置好了，代碼寫完了，文檔完善了，ci 執(zhí)行沒有錯誤了，那么就可以發(fā)布出去了。怎么發(fā)布，非常簡單，如果你沒有 https://www.npmjs.com/ 的賬號，注冊一個就好了，和一般的網(wǎng)站注冊并沒有什么區(qū)別。
有了賬號之后，在項(xiàng)目代碼根目錄，執(zhí)行：
npm publish
控制臺會要求你輸入 npmjs 網(wǎng)站的郵箱和密碼，輸入即可，然后等著出現(xiàn) 發(fā)布成功即可，一般出現(xiàn)：filesize.js@1.0.1 這樣格式的字符串即可，然后去 npmjs 網(wǎng)站刷一下試試看。
六、其他如果你做了一個很好用的有創(chuàng)意的模塊，可以給你的模塊做一個簡單炫酷的主頁來顯示用法和 API 接口吧。本文中作為示例的項(xiàng)目 filesize.js 是一個超級大輪子，就是為了寫這篇文章而做了，當(dāng)然也可以用戶開發(fā)生成環(huán)境。
最后安利一下，我的 Github 主頁：https://github.com/hustcc，ID是 hustcc，因?yàn)槲沂且粋€huster，正好之前注冊了hust.cc域名，所以有了這個 github id 。
有哪些輪子：
莆田系瀏覽器插件: Chrome瀏覽器插件——打開莆田系醫(yī)院網(wǎng)站，發(fā)出警告提醒、顯示醫(yī)院信息（莆田系哪一波潮的時候做的，用戶量還挺多的）。
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. 一個簡單的echarts(v3.0)的react封裝。
我是一個后臺開發(fā)者，最近在入門前段開發(fā)，深度Github、輪子愛好者。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/80473.html
摘要：不過，根據(jù)伯克利大學(xué)的這篇文章來看，擁有豐富的開源庫，是開發(fā)者在選擇一門開發(fā)語言時，最重要的因素。擁有超過個可用的開源庫，是目前世界上最大的開源庫集合。月份，我們發(fā)布了。這和年的情況是相反的。在的調(diào)查中，超過的受訪者表示他們正在使用。 showImg(https://segmentfault.com/img/bVblvke?w=693&h=300); 原文標(biāo)題：This year in...
摘要：下面我就以最近開發(fā)的數(shù)字鍵盤為例，一一列出具體步驟寫基礎(chǔ)模塊代碼注冊賬號配置配置添加單元測試完善發(fā)布足可以完成一個，是為了開發(fā)一個高質(zhì)量的?；照路謩e表示是否構(gòu)建成功代碼測試覆蓋率版本號下載量開源證書，看起來逼格滿滿有木有。 寫在前面 沒有發(fā)布過npm包的同學(xué)，可能會對NPM對開發(fā)有一種蜜汁敬畏，覺得這是一個很高大上的東西。甚至有次面試，面試官問我有沒有發(fā)過npm包，當(dāng)時只用過還沒寫過，...
摘要：那些瑣碎的知識點(diǎn)作者記錄的的很奇特很難記的知識點(diǎn)。易錯知識點(diǎn)整理注意和的區(qū)別中和都是輸出的作用，但是兩者之間還是有細(xì)微的差別。今天手頭不忙，總結(jié)一下，分享過程中掌握的知識點(diǎn)。 深入理解 PHP 之：Nginx 與 FPM 的工作機(jī)制 這篇文章從 Nginx 與 FPM 的工作機(jī)制出發(fā)，探討配置背后的原理，讓我們真正理解 Nginx 與 PHP 是如何協(xié)同工作的。 PHP 那些瑣碎的知識...
閱讀 3267·2021-09-06 15:02
閱讀 2301·2019-08-30 15:48
閱讀 3500·2019-08-29 11:08
閱讀 3340·2019-08-26 13:55
閱讀 2512·2019-08-26 13:35
閱讀 3214·2019-08-26 12:11
閱讀 2660·2019-08-26 11:48
閱讀 956·2019-08-26 11:42
