关于js module系统的一些笔记

oogh 发布于2019-08-23 17:06 / 1401人阅读

摘要：起因最近写完一个基于的模板再把之前写的一些代码弄到上，在项目中使用时遇到需要兼容的情况才发现在加载文件时存在一定策略，下面来简单说一下。不知道为何用生成的在引入后无法命中关键字，导致引入空内容。

起因

最近写完一个基于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

GPU云服务器云服务器关于系统错误的问题关于js的介绍关于linux操作系统的书籍关于js读取json里的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103807.html

Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0
Node.js随手笔记（一）：node简介与模块系统

摘要：模块系统为了让的文件可以相互调用，提供了一个简单的模块系统。但是，没有模块系统。包管理简称，是随同一起安装的包管理工具。输入命令，根据提示配置包的相关信息，生成相应的。以上所描述的模块载入机制均定义在模块之中。 Node.js简介首先从名字说起，网上查阅资料的时候会发现关于node的写法五花八门，到底哪一种写法最标准呢？遵循官方网站的说法，一直将项目称之为Node或者Node.js。...

TNFE 2019-08-23 11:25 评论0 收藏0
PostCSS自学笔记（一）【安装使用篇】

摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...

jsummer 2019-08-29 13:17 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0
关于JavaScript模块规范之CommonJSAMDCMD

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。也采用语句加载模块，但是不同于，它要求两个参数第一个参数，是一个数组，里面的成员就是要加载的模块第二个参数，则是加载成功之后的回调函数。本篇文章来自对文章《js模块化编程之彻底弄懂CommonJS和AMD/CMD！》的总结，大部分摘自文章原话，本人只是为了学习方便做的笔记，之后有新的体会会及时补充...

binaryTree 2019-08-26 13:22 评论0 收藏0