关于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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
左手打工，右手创业
韩垒 / 东北师大 / 2011-4 / 29.80元
《左手打工右手创业》内容简介：打工一族，不能没有激情，不能没有梦想，激情能让你战胜困难，勇往直前；同时，要让梦想变成现实，你还必须具备务实的态度和实干的精神，一步一步向目标前进。创业不是简单的乌托邦式的理想，不是仅凭一腔热血加美好梦想就能顺利到达胜利的彼岸。个人创业更多的是要依靠前期科学的规划、多角度的观察、理性的分析、有效的资源分析与整合、成熟高效的运作技能、良好的商业心态等。 《左手打工......一起来看看 《左手打工，右手创业》 这本书的介绍吧!
