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

你可能感兴趣的:(commonjs,javascript)