關於js module系統的一些筆記

原由

最近寫完一個基於sao的模板再把以前寫的一些代碼弄到github上，在項目中使用時遇到須要兼容IE的狀況才發現webpack在加載文件時存在必定策略，下面來簡單說一下。

例子

先看一下這個例子的文件和pkg的設置

dist/
    vpin.esm.js #ES2015格式
    vpin.min.js #UMD格式
    vpin.js     #Commonjs格式

package.js文件設置以下

{
    "main": "vpin.js",
    "jsnext:main": "vpin.esm.js",
    "module": "vpin.esm.js",
    "browser": "vpin.min.js"
}

在項目中用webpack加載時這個例子時，會優先加載browser設置的文件，而後纔是module或者jsnext:main，最後纔是main。

不知道爲什麼用rollup生成的UMD在webpack引入後沒法命中 exports關鍵字，致使引入空內容。

因爲上面問題致使我困惑好久，後來根據webpack加載策略，把browser設置去掉後加載esm方式的文件就把問題解決了。

若是你也有把項目發佈至npm，那麼請留意一下package.json相關設置，能避免沒必要要的麻煩。

參考資料

• JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 分析三種JS Module的設計因由
• Webpack 4 不徹底遷移指北 說起webpack模塊類型相關內容
• webpack 4 compatibility issue