怎樣開(kāi)發(fā)最優(yōu)的JS模塊

不少人都曾經(jīng)在 npm 上發(fā)布過(guò)自己開(kāi)發(fā)的 JavaScript 模塊，而在使用一些模塊的過(guò)程中，我經(jīng)常產(chǎn)生“這個(gè)模塊很有用，但如果能 xxx 就更好了”的想法。所以，本文將站在模塊使用者的角度總結(jié)一下，如何能讓模塊變得更好用。

提供 ES6 模塊的入口

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

提供 TypeScript 的類型聲明文件

如果你的用戶使用了 TypeScript 但你的模塊沒(méi)有提供聲明文件，他們就不得不在項(xiàng)目中添加一段代碼避免 TypeScript 的編譯錯(cuò)誤；另外，這樣做并不只是對(duì)使用 TypeScript 的用戶友好，因?yàn)榇蟛糠执a編輯器（Webstorm、VS Code 等）都能識(shí)別 TypeScript 的類型聲明，它們可以據(jù)此提供更精準(zhǔn)的代碼提示并在用戶傳入錯(cuò)誤的參數(shù)個(gè)數(shù)或類型時(shí)給出提示。

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

讓模塊同時(shí)在 Node.js 與瀏覽器中運(yùn)行

你可以通過(guò)檢測(cè)是否有名為 window 的全局變量（例如 !!typeof window）來(lái)判斷模塊當(dāng)前是運(yùn)行在 Node.js 還是瀏覽器中，然后使用不同的方式實(shí)現(xiàn)你的功能。

這種方法比較常見(jiàn)，但如果用戶使用了模塊打包工具，這樣做會(huì)導(dǎo)致 Node.js 與瀏覽器的實(shí)現(xiàn)方式都會(huì)被包含在最終的輸出文件中。針對(duì)這個(gè)問(wèn)題，開(kāi)源社區(qū)提出了在 package.json 中添加 browser 字段的提議，目前 webpack 和 rollup 都已經(jīng)支持這個(gè)字段了。

browser 字段有兩種使用方式：

給 browser 字段提供一個(gè)文件路徑作為在瀏覽器端使用時(shí)的模塊入口，但需要注意的是，打包工具會(huì)優(yōu)先使用 browser 字段指定的文件路徑作為模塊入口，所以你的 module 字段會(huì)被忽略，這會(huì)導(dǎo)致打包工具不會(huì)優(yōu)化你的代碼。詳細(xì)信息請(qǐng)參考這個(gè)問(wèn)題。

如果你只想替換其中一些文件，你可以聲明一個(gè)對(duì)象。

舉個(gè)例子，假設(shè)你的模塊里有兩個(gè)文件：http.js 和 xhr.js，第一個(gè)文件使用 Node.js 中的 http 模塊發(fā)起請(qǐng)求，另一個(gè)使用瀏覽器中的 XMLHTTPRequest 實(shí)現(xiàn)了同樣的功能。為了使用適當(dāng)?shù)奈募愕哪K代碼中應(yīng)該始終 require(‘./path/to/http.js')，并在 package.json 中聲明：

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

這樣一來(lái)，當(dāng)你的模塊在打包工具中使用時(shí)，打包工具只會(huì)將 xhr.js 的代碼包含在最終的輸出文件中。

使用各種服務(wù)武裝你的項(xiàng)目

大部分 JavaScript 項(xiàng)目都是開(kāi)源的，而開(kāi)源社區(qū)也提供了很多針對(duì)開(kāi)源項(xiàng)目的免費(fèi)服務(wù)，它們可以給你的項(xiàng)目提供更有力的幫助，這里列舉幾個(gè)比較常用的。

一個(gè)項(xiàng)目最常使用的服務(wù)就是持續(xù)集成了。持續(xù)集成服務(wù)能將測(cè)試、代碼風(fēng)格檢測(cè)、打包等任務(wù)放在服務(wù)器上，并在你提交代碼時(shí)自動(dòng)運(yùn)行，常用的有 Travis CI、CircleCI 和 AppVeyor。Travis CI 對(duì)開(kāi)源項(xiàng)目免費(fèi)，提供 Linux 與 OS X 運(yùn)行環(huán)境；CircleCI 對(duì)開(kāi)源與私有項(xiàng)目都免費(fèi)，但每個(gè)月有 1500 分鐘的運(yùn)行時(shí)間限制；AppVeyor 提供 Windows 運(yùn)行環(huán)境，同樣對(duì)開(kāi)源項(xiàng)目免費(fèi)。

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

如果你想讓你的模塊在各個(gè)版本的各種瀏覽器、平臺(tái)下得到充分的測(cè)試，你還可以使用 Sauce Labs 和 BrowserStack，它們都是對(duì)開(kāi)源項(xiàng)目免費(fèi)的，但需要發(fā)郵件申請(qǐng)。

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

webpack+express的多頁(yè)站點(diǎn)開(kāi)發(fā)實(shí)現(xiàn)步驟

Webpack框架使用總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com