怎麼開發併發佈一個可用的 JavaScript 模塊 ？

Javascript 那麼流行，做爲一個前端開發者，或者前端入門者，發佈一個正式可用的 Javascript 模塊，對於本身來講應該成長很大。下面就以一個簡單的 Javascript 模塊 filesize.js 來介紹 github、travis-ci、npm 這些內容的組合使用。

1、目標概覽

本文將使用 filesize.js 這個做爲介紹，這個是一個很是簡單的 js 庫，總共代碼也不到 20 行，可是功能完善，能夠生產使用。事實上 npm 上有很多簡單到幾行代碼搞定的模塊。

1. 首先發佈一個 js 模塊，確定須要時代碼開源，因此必須使用到 Github 做爲代碼管理。發佈到 npm 能不能不開源呢，固然能夠，但npm install 獲得以後就是你的源碼。
2. 發佈一個 js 模塊，須要讓別人使用，良好的測試必不可少（不少項目有下圖的綠色小圖標），因此須要給你的項目寫完善的測試用例（testcase），而後利用 Github 上第三方的 ci 工具來執行，travis-ci 就是其中一個用的比較多的。
3. 代碼測試完畢，沒有任何問題以後，能夠 npm 發佈模塊了。

咱們 filesize.js 達到的效果就是這樣的：

而且能夠直接 npm install filesize.js 安裝下載。下面分別介紹說明。

2、Github 項目初始化

首先在 Github 上建立項目，注意想好項目的名字，名字最好可以和以後 npm 發佈的模塊名字相同（npm 模塊名字不能和其餘人已經發布的名字重複）。後面關於 Github 若是提交代碼這些請自行找其餘文章學習。

須要強調的是：

1. 注意完善的 README.md 文檔，能夠文檔先行，這樣能夠在寫代碼以前想好你這個模塊的 API 方法等。

2. 能夠嘗試先寫 testcase（測試先行），固然不強制，提早寫 case，沒法運行測試其實也挺耗時的。

3. 注意整理代碼結構，對於 js 模塊代碼，通常是:

• package.json 是 npm 模塊相關的配置；
• glupfile.js 是 glup 的配置文件，我這裏主要用來壓縮代碼；
• README.md 文檔說明；
• .gitignore 忽略 git 版本管理的文件和目錄（一些可有可無的所有不要上傳 git）；
• .travis.yml travis-ci配置文件，後面會說。

3、Javascript 模塊 & npm

對於一個 js 模塊，都有 package.json 文件，這個是一個嚴格要求的 json 格式，任何不符合要求的都會在執行 npm 命令的時候報錯。好比 filesize.js 的該文件內容以下：

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

1. name：npm 發佈以後的名字，通常和前述 github 項目名字保持一致，且不能和已有的 npm 模塊重名；
2. keywords：npm 模塊的關鍵字，用於在 npmjs.com 上檢索；
3. devDependencies：開發依賴，好比會用到 glup 壓縮混淆，tape 進行單元測試，jshint 進行靜態代碼檢查；這些都是開發過程當中須要的依賴，非開發環境能夠不用安裝；
4. dependencies：模塊的依賴庫，用戶在使用你的這個模塊的時候，也會附帶進行安裝下載；filesize.js模塊很簡單，並無任何依賴。
5. scripts：配置一些指令，好比：npm run lint，npm run test，npm run build：分別是代碼檢查，執行測試用例，build 壓縮庫
6. main：這個是 package.json 中很是重要的配置，標誌引用這個模塊的入口在哪裏；
7. version：模塊的版本，每次發佈的時候，好比保證版本不同。

除了這些配置，package.json 還有其餘的更多配置，你們能夠去搜索學習一下，通常有了這些配置項，就夠了，就能夠進行 npm publish 來發布模塊。

可是，咱們發佈以前，須要作一些持續集成和單元測試，用來保證代碼的正確性，穩定性。這個就是使用到 travis-ci 了。

4、接入 travis-ci 持續集成

持續集成是什麼？簡單來講就是儘快，儘量早的進行代碼的正確性驗證（也就是測試），那麼咱們每次在 github push代碼的時候就運行一下測試用例，這個是否是很快，很早，也就是持續集成，對於一些簡單的 js 模塊，咱們作一些簡單的單元測試就夠夠的了。

在 github 建立項目以後，能夠打開 https://travis-ci.org/，並使用 Github 受權登錄，而後本身的 Account 菜單中勾上須要接入 travis-ci 的項目，以下圖所示：

若是看不到新建立的項目，能夠右上角刷新一下。開啓以後，travis-ci 會 hook 住你 git push 命令，而後根據你項目中的 .travis.yml 配置文件來執行 npm test（npm run test 的簡寫）進行測試，並捕獲檢測結果來判斷 測試用例 執行成功與否。例如 filesize.js的 .travis.yml 配置以下所示：

表示執行在 nodejs 環境，兩個不一樣的大版本分別執行如下，通常選擇 4.x 版本便可。那麼每次 push 代碼以後，都會進行自動觸發 ci 任務，以下圖所示：

而後你就能夠把這個小綠色圖表放到你的 README.md 文件中了。

5、發佈 publish

項目建立了，package.json 配置好了，代碼寫完了，文檔完善了，ci 執行沒有錯誤了，那麼就能夠發佈出去了。怎麼發佈，很是簡單，若是你沒有 https://www.npmjs.com/ 的帳號，註冊一個就行了，和通常的網站註冊並無什麼區別。

有了帳號以後，在項目代碼根目錄，執行：

npm publish

控制檯會要求你輸入 npmjs 網站的郵箱和密碼，輸入便可，而後等着出現 發佈成功便可，通常出現：filesize.js@1.0.1 這樣格式的字符串便可，而後去 npmjs 網站刷一下試試看。

6、其餘

若是你作了一個很好用的有創意的模塊，能夠給你的模塊作一個簡單炫酷的主頁來顯示用法和 API 接口吧。本文中做爲示例的項目 filesize.js 是一個超級大輪子，就是爲了寫這篇文章而作了，固然也能夠用戶開發生成環境。

最後安利一下，個人 Github 主頁：https://github.com/hustcc，ID是 hustcc，由於我是一個huster，正好以前註冊了hust.cc域名，因此有了這個 github id 。

有哪些輪子：

• 莆田系瀏覽器插件: Chrome瀏覽器插件——打開莆田系醫院網站，發出警告提醒、顯示醫院信息（莆田系哪一波潮的時候作的，用戶量還挺多的）。
• 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封裝。

我是一個後臺開發者，最近在入門前段開發，深度Github、輪子愛好者。