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