編寫一個供瀏覽器端使用的NPM包

標籤：href   16px   rgb   bug   自己   desc   指定   如何   pad   

此文已由作者吳維偉授權網易雲社區發布。

歡迎訪問網易雲社區，瞭解更多網易技術產品運營經驗。

在編寫程式時，總會有一些代碼是我們不願意一遍又一遍重複地去寫的，比如一些UI或互動相似組件，或是一些相似的流程或邏輯。以前，面對這樣的情況，我會將可以複用的部分抽象出來，做成可以複用的模組，放在專門存放公用模組的檔案夾中，便於尋找和引用。但是這樣只能解決單個項目中公用模組複用的問題，如果你的模組需要被多重專案複用，那麼就需要另尋它法了。本文討論的是通過發布npm包來實現模組複用時有哪些注意事項。

建立一個包

在項目根目錄下執行下面的命令，初始化package.json檔案。

$ npm init

檔案中各欄位的含義可以參考官方文檔。其中需要注意的是：

• name指定包名，在發布包時包名不能與已有包名重複。在發布前可以通過npm info packageName查看包名是否已存在。

• main指定載入包時預設載入的檔案。

• files指定發布包時需要發布的檔案。一般來說，.git, node_modules, test等檔案不應該發布到npm倉庫中。

• dependencies指定需要依賴的第三方包。在安裝此包時，這些第三方包也同時會被安裝。為了提高包的安裝速度，不必要的依賴不要放在dependencies中。

打包
為什麼需要打包

商務專案的打包過程中，為了提高打包速度，某些處理過程會過濾第三方包，如babel。而且商務專案中可能沒有處理第三方庫中某些特性的能力，如第三方包中使用了coffeescript。所以作為一個能被良好複用的第三方包，需要在發布前，對自己的源碼進行編譯打包。

注意事項

可以選擇webpack進行打包。在打包過程中，與商務專案不同的是：

將output.libraryTarget配置為commonjs

商務專案中打包後的檔案只需要被執行，並不需要對外匯出變數。為了能夠以commonjs規範對外匯出變數，需要將output.libraryTarget配置為commonjs點擊查看如何配置

打包時過濾第三方包

作為一個NPM包，可能會依賴一些第三方包，如React。如果直接進行打包，打包後的檔案會包含React的代碼。一般依賴這個NPM包的商務專案也會依賴React，所以最終React的代碼會被打包兩次。所以建議在打包時對第三方包進行過濾，並把用到的第三方包聲明在dependencies中，使依賴的第三方包隨商務專案一起打包。點擊查看如何過濾第三方包

使用babel-plugin-transform-runtime

我們通常會使用babel來編譯代碼。在編譯的過程中，babel會額外注入一些代碼，使編譯後的代碼有更好的相容性，如繼承，Promise, Map, Set等功能的實現。為了防止這些額外的代碼被重複加入，可以在編譯時間使用babel-plugin-transform-runtime外掛程式，使這些額外的功能從第三方包(babel-runtime)中匯入，而不是直接添加實現代碼。同時在打包時也要對babel-runtime進行過濾，使babel-runtime隨商務專案一起打包。點擊查看如何使用transform-runtime

按需載入

有時一個NPM包會提供很多功能，而依賴它的商務專案只需要其中一部分。這個時候，NPM包需要提供按需載入的功能，即在打包時只會將引用的部分模組打包進來，從而減少打包後檔案的體積。

babel-plugin-import的使用

babel-plugin-import外掛程式可以實現按需載入的功能。

{    "plugins": [        ["import", {            "libraryName": "abc",            "style": true        }]    ]}

上面的代碼是babel設定檔的一部分，聲明對abc模組使用按需載入的功能。它對下面的一段代碼進行編譯：

// 從模組中匯入var1, var2, var3 3個變數，只使用了var1import {var1, var2, var3} from ‘abc‘console.log(var1)

編譯結果：

import { style as _style } from ‘abc/lib/var1/style‘;import _default from ‘abc/lib/var1‘;console.log(_default);

編譯前，匯入整個abc包。編譯後，只匯入了使用了的var1。babel-plugin-import支援更靈活的配置，點擊查看詳情。點擊查看如何配置babel

為了使babel-plugin-import能夠按需載入我們的NPM包，在打包時需要有一些相應的配置。如上面的abc包，需要對var1, var2, var3等模組分別打包。所以打包後的檔案除了abc/index.js外，還需要有abc/lib/var1/index.js, abc/lib/var1/style.js等

測試

對於一個公用模組，最重要的應該是它的穩定性。一個每次升級都可能帶來新bug的公用模組並不是我們想要的。相比於商務專案，公用模組提供的功能變化較小，這樣單元測試就有了用武之地。想象之中，公用模組的迭代過程是這樣的：

• 明確模組提供的功能，並針對這些功能編寫測試案例。

• 進行功能開發，通過測試案例。

• 如果需要修複bug或新增功能，針對bug或新功能編寫測試案例，通過用例。

  如何進行單元測試斷言庫

  斷言庫主要用於對資料進行比較，判斷其是否與預期相符。對於不滿足預期的斷言，會拋出一個異常.

  assert.equal(‘a‘, ‘b‘)
  

  如上面的斷言會拋出一個異常AssertionError: ‘a‘ == ‘b‘斷言庫推薦使用Chai，支援多種風格的斷言。

  測試架構

  測試架構可以對測試案例進行分類管理。每一個測試案例在一個單獨的閉包中執行，如果在這個閉包中捕獲到異常，則認為這個測試案例沒有通過。

// 一個分類describe(‘type1:‘, function () {    // 一個用例（通過）    it(‘case 1:‘, function () {        assert.equal(‘a‘, ‘a‘)    })   // 一個用例（未通過）    it(‘case 2:‘, function () {        assert.equal(‘a‘, ‘b‘)    })})

測試架構推薦使用mocha

測試執行器

推薦使用karma，它可以整合webpack、 mocha、 chai、 瀏覽器，對測試代碼進行打包，並在瀏覽器環境下執行測試案例，最後在控制台輸出結果。

文檔

一個公用模組應該有一個API文檔，但是手動維護一個文檔的成本過高。所幸現在有一些工具可以根據代碼中的注釋自動產生API文檔，你需要做的只是根據規範添加代碼注釋。點擊查看注釋規範產生網頁形式的文檔產生markdown形式的文檔

網易雲免費體驗館，0成本體驗20+款雲產品！ 

更多網易技術、產品、運營經驗分享請點擊。

相關文章：
【推薦】 即時通訊推送保障及網路最佳化詳解（一）

編寫一個供瀏覽器端使用的NPM包