怎麼開發併釋出一個可用的 JavaScript 模組 ？

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

一、目標概覽

本文將使用 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 安裝下載。下面分別介紹說明。

二、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配置檔案，後面會說。

三、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 了。

四、接入 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 檔案中了。

五、釋出 publish

專案建立了，package.json 配置好了，程式碼寫完了，文件完善了，ci 執行沒有錯誤了，那麼就可以釋出出去了。怎麼釋出，非常簡單，如果你沒有 https://www.npmjs.com/ 的賬號，註冊一個就好了，和一般的網站註冊並沒有什麼區別。

有了賬號之後，在專案程式碼根目錄，執行：

控制檯會要求你輸入 npmjs 網站的郵箱和密碼，輸入即可，然後等著出現 釋出成功即可，一般出現：filesize.js@1.0.1 這樣格式的字串即可，然後去 npmjs 網站刷一下試試看。

六、其他

如果你做了一個很好用的有創意的模組，可以給你的模組做一個簡單炫酷的主頁來顯示用法和 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、輪子愛好者。