關於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