关于js module系统的一些笔记

栏目: JavaScript · 发布时间: 5年前

内容简介：最近写完一个基于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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Foundations of PEAR

Good, Nathan A./ Kent, Allan / Springer-Verlag New York Inc / 2006-11 / $ 50.84

PEAR, the PHP Extension and Application Repository, is a bountiful resource for any PHP developer. Within its confines lie the tools that you need to do your job more quickly and efficiently. You need......一起来看看《Foundations of PEAR》这本书的介绍吧!

码农工具

Base64 编码/解码

RGB CMYK 转换工具

RGB CMYK 互转工具