起因
最近写完一个基于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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。