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

此文已由做者吳維偉受權網易雲社區發佈。

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

在編寫程序時，總會有一些代碼是咱們不肯意一遍又一遍重複地去寫的，好比一些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+款雲產品！ 

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

相關文章：
【推薦】 一行代碼搞定Dubbo接口調用
【推薦】 HBase原理–全部Region切分的細節都在這裏了