amazeui.js为什么一样又不一样?

发现问题

把amazeui源码放在src/assets下

import时发现缺少了jQuery依赖

按照百度以bootstrap的例子,全局引入jq,报错依然存在

ps:201804月百度bootstrap中文网下载的源码,首页是3.3.7版本

妥协问题

无奈遂放弃源码文件形式,使用npm i amazeui --save

提示npm i jquery --save

按照提示,没有报错并能正确使用

不服问题

从两份amazeui源码和bootstrap找答案

其实两份amazeui源码是一模一样的,都是webpack打包出来的

经过大量!大量!大量!,多猜想的尝试,得出amazeui.js支持多种依赖jq的模块化方式,以及在不同文件夹下用不同的方式的结论

src之内的js文件都使用way2,之外的(node_modules、static)使用way1

现象a:src下无exports顶层变量、way2无法正确依赖jq

分析现象

现象a原因关乎到es6 module内容

阮一峰说,es6 module中没有这些顶层变量:

阮一峰说,es6 module中的this为undefined,并不是期望的wnidow

也就是说src内的都解析为es6 module,src外都解析为commonjs

先分析bootstrap的不同

源码看为什么bootstrap在全局引入(不能使用window的方式)jq下会成功

与way1和way2不一样,直接在module下找到了jq

接下来我尝试npm i bootstrap方式

发现是webpack打包后的代码

重点:百度中文网下的是3.3.7的代码,npm下的是4.0.0的代码,后者支持模块化

可想出,npm的bootstrap效果和amazeui是一样的了,这里掉坑了

所以网上的帖子有时效性啊

webpack是如何解析这些js文件的

2. .babelrc:结合官网说明得出"modules": false,表示使用es6 module

手动"modules": "commonjs",exports无论如何都存在

总结出以下规律

所以除了src位置,还存在一个变量因素:webpack打包出来js文件

奇怪的现象

当存在以下代码并且第一次npm start,热部署情况下即使删掉,exports永远都为undefined,猜想应该是缓存的原因

不存在以下代码,则exports不为undefined

换句话说,只要typeof module,就是es6 module,否则被转换commonjs

查阅相关资料,这关乎到js模块检测的问题、我想这就是所有问题的答案了

而这行代码,也只有webpack打包出来才有的

总结

经过不停的(猜想、尝试、总结)、总结完又发现问题,继续循环。

大概经历结论如下

直接原因:src下因为没有exports而无法获得jq,为什么?

是webpack打包的js文件都没有exports,为什么?

百度智能收索提示:webpack exports is not defined,为什么?

因为.babelrc默认的"modules": false,为什么不是webpack打包的js有exports?

因为 ,babel-loader环境监测,决定了使用哪种模块

第5点我想比较底层原因了,能力有限,不想在继续挖了(babel-loader)

参考链接

https://blog.csdn.net/gdp12315_gu/article/details/51547868

http://es6.ruanyifeng.com/#docs/module-loader

https://www.cnblogs.com/brandonchen/p/5550470.html

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180407G1CGO500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励