意象說明
工欲善其事必先利其器
在社群上有網友問到如何判斷 npmjs.com (或任意 open source 平台)上的套件,是否支援 node 或 browser,以下我將自己的經驗整理回答如下:
首先當然就是先看 readme。通常 for browser 專用的套件,都會直接說明支援哪些瀏覽器,或在哪些瀏覽器測試過。另一個觀察的方式就是看它是否還可以使用 bower 安裝。
再來,可以了解一下套件提供的功能,自行判斷一下這些功能的實作需要哪些平台功能的支援。由此大概判斷是 for node 或 for browser。
另外,可以看套件本身支援哪種模組格式:
採用 AMD 的話,通常作者只預期可以在 browser 上使用 (但實際上也許可以供 node 使用),
採用 UMD 的話,通常作者預期可以同時在 browser 和 node 上使用,
採用 CommonJS 的話,通常作者只預期可以在 node 上使用 (但實際上也許可以供 browser 使用),
採用 ES2015 module 的話,就很難僅憑格式判斷。
這一點因為現在 browserify 和 webpack 的流行,越來越多人只使用 CommonJS 或 ES2015 格式,所以只能做為參考。
看一下相依的模組,看看有沒有熟悉的模組,這些模組是否只支援特定平台。
掃一下 source code,看看有沒有平台相關的關鍵字,譬如
window
,location
(browser) 或process
,readFile
(node) 之類。如果上面的方式都無法判斷的話,最快的方式就是直接寫測試程式,在目標平台上執行看看。
因為至少有下面兩項因素會導致套件無法在 browser 上使用:
套件本身或依賴的套件用到了 node 的專屬 API
不過,類似 browserify 這樣的工具可以提供簡單的 node API 供 browser 下使用。
用到了一般瀏覽器尚未支援的語言特性
不過,一樣可以用 babel 等工具來克服。
相反地,如果是要在 node 上使用,怕套件本身或依賴的套件用到了 browser host object 的話,真的只有直接測試比較快。
最後的絕招,如果在所有的文件上都找不到的話,就直接向作者詢問吧。
真的要先確認文件上找不到再發問,建議直接發 issue (標示為 Question),因為其他使用者也可能會想知道答案。大部分的作者都會很熱心回答,不過有時候還是需要耐心等候。