怎么開發并發布一個可用的 JavaScript 模塊 ？
Javascript 那么流行，作為一個前端開發者，或者前端入門者，發布一個正式可用的 Javascript 模塊，對于自己來說應該成長很大。下面就以一個簡單的 Javascript 模塊 filesize.js 來介紹 github、travis-ci、npm 這些內容的組合使用。
一、目標概覽
本文將使用 filesize.js 這個作為介紹，這個是一個非常簡單的 js 庫，總共代碼也不到 20 行，但是功能完善，可以生產使用。事實上 npm 上有不少簡單到幾行代碼搞定的模塊。
- 首先發布一個 js 模塊，肯定需要時代碼開源，所以必須使用到 Github 作為代碼管理。發布到 npm 能不能不開源呢，當然可以，但npm install 得到之后就是你的源碼。
- 發布一個 js 模塊，需要讓別人使用，良好的測試必不可少（很多項目有下圖的綠色小圖標），所以需要給你的項目寫完善的測試用例（testcase），然后利用 Github 上第三方的 ci 工具來執行， travis-ci 就是其中一個用的比較多的。
- 代碼測試完畢，沒有任何問題之后，可以 npm 發布模塊了。
我們 filesize.js 達到的效果就是這樣的：
并且可以直接 npm install filesize.js 安裝下載。下面分別介紹說明。
二、Github 項目初始化
首先在 Github 上創建項目，注意想好項目的名字， 名字最好能夠和之后 npm 發布的模塊名字相同 （npm 模塊名字不能和其他人已經發布的名字重復）。后面關于 Github 如果提交代碼這些請自行找其他文章學習。
需要強調的是：
-
注意 完善的 README.md 文檔，可以文檔先行，這樣可以在寫代碼之前想好你這個模塊的 API 方法等。
-
可以嘗試先寫 testcase（測試先行），當然不強制，提前寫 case，無法運行測試其實也挺耗時的。
-
注意整理代碼結構，對于 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 ；
-
name ：npm 發布之后的名字，一般和前述 github 項目名字保持一致，且不能和已有的 npm 模塊重名；
-
keywords ：npm 模塊的關鍵字，用于在 npmjs.com 上檢索；
-
devDependencies ：開發依賴，比如會用到 glup 壓縮混淆，tape 進行單元測試，jshint 進行靜態代碼檢查；這些都是開發過程中需要的依賴，非開發環境可以不用安裝；
-
dependencies ：模塊的依賴庫，用戶在使用你的這個模塊的時候，也會附帶進行安裝下載；filesize.js模塊很簡單，并沒有任何依賴。
-
scripts ：配置一些指令，比如： npm run lint ， npm run test ， npm run build ：分別是代碼檢查，執行測試用例，build 壓縮庫
-
main ：這個是 package.json 中非常重要的配置，標志引用這個模塊的入口在哪里；
-
version ：模塊的版本，每次發布的時候，比如保證版本不一樣。
除了這些配置，package.json 還有其他的更多配置，大家可以去搜索學習一下，一般有了這些配置項，就夠了，就可以進行 npm publish 來發布模塊。
但是，我們發布之前，需要做一些持續集成和單元測試，用來保證代碼的正確性，穩定性。這個就是使用到 travis-ci 了。
四、接入 travis-ci 持續集成
持續集成是什么？簡單來說就是盡快，盡可能早的進行代碼的正確性驗證（也就是測試），那么我們每次在 github push代碼的時候就運行一下測試用例，這個是不是很快，很早，也就是持續集成，對于一些簡單的 js 模塊，我們做一些簡單的單元測試就夠夠的了。
在 github 創建項目之后，可以打開，并使用 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 執行沒有錯誤了，那么就可以發布出去了。怎么發布，非常簡單，如果你沒有的賬號，注冊一個就好了，和一般的網站注冊并沒有什么區別。
有了賬號之后，在項目代碼根目錄，執行：
shell
npm publish
控制臺會要求你輸入 npmjs 網站的郵箱和密碼，輸入即可，然后等著出現 發布成功即可，一般出現： filesize.js@1.0.1 這樣格式的字符串即可，然后去 npmjs 網站刷一下試試看。npm publish
六、其他
如果你做了一個很好用的有創意的模塊，可以給你的模塊做 一個簡單炫酷的主頁 來顯示用法和 API 接口吧。本文中作為示例的項目是一個超級大輪子，就是為了寫這篇文章而做了，當然也可以用戶開發生成環境。
來自：http://www.linuxeden.com/html/news/20160925/168208.html