关于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