关于js module系统的一些笔记
栏目: JavaScript · 发布时间: 6年前
内容简介：最近写完一个基于sao的模板再把之前写的一些代码弄到github上，在项目中使用时遇到需要兼容IE的情况才发现webpack在加载文件时存在一定策略，下面来简单说一下。先看一下这个例子的文件和pkg的设置
起因
最近写完一个基于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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
