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

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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 達到的效果就是這樣的:

clipboard.png

並且可以直接 npm install filesize.js 安裝下載。下面分別介紹說明。

二、Github 專案初始化

首先在 Github 上建立專案,注意想好專案的名字,名字最好能夠和之後 npm 釋出的模組名字相同(npm 模組名字不能和其他人已經發布的名字重複)。後面關於 Github 如果提交程式碼這些請自行找其他文章學習。

需要強調的是:

  1. 注意完善的 README.md 文件,可以文件先行,這樣可以在寫程式碼之前想好你這個模組的 API 方法等。

  2. 可以嘗試先寫 testcase(測試先行),當然不強制,提前寫 case,無法執行測試其實也挺耗時的。

  3. 注意整理程式碼結構,對於 js 模組程式碼,一般是:
    clipboard.png

  • package.json 是 npm 模組相關的配置;

  • glupfile.js 是 glup 的配置檔案,我這裡主要用來壓縮程式碼;

  • README.md 文件說明;

  • .gitignore 忽略 git 版本管理的檔案和目錄(一些無關緊要的全部不要上傳 git);

  • .travis.yml travis-ci配置檔案,後面會說。

三、Javascript 模組 & npm

對於一個 js 模組,都有 package.json 檔案,這個是一個嚴格要求的 json 格式,任何不符合要求的都會在執行 npm 命令的時候報錯。比如 filesize.js 的該檔案內容如下:

clipboard.png

這其中比較重要的就是 name/officialNamekeywordsdevDependenciesdependenciesscriptsmainversion

  1. name:npm 釋出之後的名字,一般和前述 github 專案名字保持一致,且不能和已有的 npm 模組重名;

  2. keywords:npm 模組的關鍵字,用於在 npmjs.com 上檢索;

  3. devDependencies:開發依賴,比如會用到 glup 壓縮混淆,tape 進行單元測試,jshint 進行靜態程式碼檢查;這些都是開發過程中需要的依賴,非開發環境可以不用安裝;

  4. dependencies:模組的依賴庫,使用者在使用你的這個模組的時候,也會附帶進行安裝下載;filesize.js模組很簡單,並沒有任何依賴。

  5. scripts:配置一些指令,比如:npm run lintnpm run testnpm 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 的專案,如下圖所示:

clipboard.png

如果看不到新建立的專案,可以右上角重新整理一下。開啟之後,travis-ci 會 hook 住你 git push 命令,然後根據你專案中的 .travis.yml 配置檔案來執行 npm test(npm run test 的簡寫)進行測試,並捕獲檢測結果來判斷 測試用例 執行成功與否。例如 filesize.js的 .travis.yml 配置如下所示:

clipboard.png

表示執行在 nodejs 環境,兩個不同的大版本分別執行以下,一般選擇 4.x 版本即可。那麼每次 push 程式碼之後,都會進行自動觸發 ci 任務,如下圖所示:

clipboard.png

然後你就可以把這個小綠色圖表放到你的 README.md 檔案中了。

五、釋出 publish

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

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

npm publish

控制檯會要求你輸入 npmjs 網站的郵箱和密碼,輸入即可,然後等著出現 釋出成功即可,一般出現:[email protected] 這樣格式的字串即可,然後去 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、輪子愛好者。

相關文章

軟體開發工具 最新文章