如何開發出更好的JavaScript模塊

不少人都曾經在 npm 上發布過自己開發的 JavaScript 模塊，而在使用一些模塊的過程中，我經常產生“這個模塊很有用，但如果能 xxx 就更好了”的想法。所以，本文將站在模塊使用者的角度總結一下，如何能讓模塊變得更好用。

提供 ES6 模塊的入口

webpack 和 rollup 都支持對 ES6 模塊做一些靜態優化（例如 Tree Shaking 和 Scope Hoisting），它們都會優先讀取 package.json 中的 module 字段作為 ES6 模塊的入口，若沒有 module 才會讀取 main 字段作為 CommonJS 模塊的入口。通常的做法是：使用 ES6 語法編寫源碼，然后用模塊打包工具結合語法轉換工具生成 CommonJS 模塊和 ES6 模塊，這樣就可以同時提供 main 和 module 字段了。

提供 TypeScript 的類型聲明文件

如果你的用戶使用了 TypeScript 但你的模塊沒有提供聲明文件，他們就不得不在項目中添加一段代碼避免 TypeScript 的編譯錯誤；另外，這樣做并不只是對使用 TypeScript 的用戶友好，因為大部分代碼編輯器（Webstorm、VS Code 等）都能識別 TypeScript 的類型聲明，它們可以據此提供更精準的代碼提示并在用戶傳入錯誤的參數個數或類型時給出提示。

最好的做法是使用 TypeScript 編寫你的模塊，編譯時會自動生成類型聲明。除此之外，你也可以參照文檔手動維護一份聲明文件。你可以在你的模塊根目錄下添加 index.d.ts 文件，或者在 package.json 中聲明 typings 字段提供聲明文件的位置。

讓模塊同時在 Node.js 與瀏覽器中運行

你可以通過檢測是否有名為 window 的全局變量（例如 !!typeof window）來判斷模塊當前是運行在 Node.js 還是瀏覽器中，然后使用不同的方式實現你的功能。

這種方法比較常見，但如果用戶使用了模塊打包工具，這樣做會導致 Node.js 與瀏覽器的實現方式都會被包含在最終的輸出文件中。針對這個問題，開源社區提出了在 package.json 中添加 browser 字段的提議，目前 webpack 和 rollup 都已經支持這個字段了。

browser 字段有兩種使用方式：

給 browser 字段提供一個文件路徑作為在瀏覽器端使用時的模塊入口，但需要注意的是，打包工具會優先使用 browser 字段指定的文件路徑作為模塊入口，所以你的 module 字段會被忽略，這會導致打包工具不會優化你的代碼。詳細信息請參考這個問題。

如果你只想替換其中一些文件，你可以聲明一個對象。

舉個例子，假設你的模塊里有兩個文件：http.js 和 xhr.js，第一個文件使用 Node.js 中的 http 模塊發起請求，另一個使用瀏覽器中的 XMLHTTPRequest 實現了同樣的功能。為了使用適當的文件，你的模塊代碼中應該始終 require(‘./path/to/http.js')，并在 package.json 中聲明：

{
 "browser": {

  "./path/to/http.js": "./path/to/xhr.js"
 }
}

這樣一來，當你的模塊在打包工具中使用時，打包工具只會將 xhr.js 的代碼包含在最終的輸出文件中。

使用各種服務武裝你的項目

大部分 JavaScript 項目都是開源的，而開源社區也提供了很多針對開源項目的免費服務，它們可以給你的項目提供更有力的幫助，這里列舉幾個比較常用的。

一個項目最常使用的服務就是持續集成了。持續集成服務能將測試、代碼風格檢測、打包等任務放在服務器上，并在你提交代碼時自動運行，常用的有 Travis CI、CircleCI 和 AppVeyor。Travis CI 對開源項目免費，提供 Linux 與 OS X 運行環境；CircleCI 對開源與私有項目都免費，但每個月有 1500 分鐘的運行時間限制；AppVeyor 提供 Windows 運行環境，同樣對開源項目免費。

運行完測試之后，你還可以將測試覆蓋率上傳到 Coveralls。這個服務能讓你在線瀏覽代碼的測試覆蓋情況。

如果你想讓你的模塊在各個版本的各種瀏覽器、平臺下得到充分的測試，你還可以使用 Sauce Labs 和 BrowserStack，它們都是對開源項目免費的，但需要發郵件申請。

最后，Shields IO 提供了各種圖標，這些圖標能為你的項目提供很多額外信息，包括但不限于 npm 版本號、下載量、測試通過狀態、測試覆蓋率、文件大小、依賴是否過期等。

以上就是我們分享給大家的如何開發出好用的JavaScript模塊的全部內容，大家如果還有任何不明白的地方可以在下方的留言區域討論，感謝你對億速云的支持。