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