commonJS模块化和ES6模块化的对比

COMMONJS模块化

概述

在Node的世界里，每个文件就是一个模块，有着自己的作用域，在文件定义的变量，函数，类都属于私有的，其他文件不可见。但是可以通过向外暴露的方式使其可见。Node的模块化采用了CommonJS模块规范

模块化的使用

Node使用CommonJS模块规范，内部提供一个Module构建函数，所有模块都是Module的实例，通过module.exports属性作为对外输出的接口，为了方便，Node为每个模块提供exports变量，指向module.exports；通过内置的require命令用于加载模块文件。

exports 与module.exports的区别

1. exports 是 module.exports的引用 ，也就是说如果对exports直接赋值，那么exports不再指向module.exports；
2. module.exports本质上是一个空对象；通常我们使用的方式是module.exports = { … …}这种形式；
3. module.exports本质是一个空对象，而且，exports是其的引用，那么可以通过，exports.xxx的方式无限的为其添加属性；
4. 值得注意的是exports.xxx 使用完后，继续在其后使用module.exports = {… …} ，则前面使用exports暴露的内容将不起作用；

ES6模块化

ES6模块化语法

• export 按需暴露；
  
  直接使用export关键字，写再声明前面，或者在代码底部通过export {...}的方式进行暴露；
• export default 默认暴露；
  默认暴露的方式不能像按需暴露的方式那样直接在声明前面使用这两个关键字（export default）只能通过export default {....}的方式进行暴露
• import * as xxx from “…” 通用的方式引入；

从通用引入的方式可以看出，通过默认暴露的的方式进行暴露的内容，本质上是放置在Module中的defualt对象当中

• import xxxx from “…” 直接引用的方式（适用于默认暴露方式的引入）

• import {xxx}from “…” 解构赋值的方式导入

• 默认暴露和按需暴露的混用导入
  
  值得注意的是，默认暴露的方式也可以通过解构赋值的方式进行导入
  意思是解构赋值能够得到defualt，得到默认暴露的内容然后我们可以使用as关键字给这个默认暴露的defalt对象取别名。
  

commonJS和ES6的模块化的区别

运行时间的区别

• require是运行时调用，所以require理论上可以运用在代码的任何地方
• import是编译时调用，所以必须放在文件开头

两者的联系

• ES6目前没有被绝大多数浏览器厂商所支持，因此使用过程中需要借助其他工具例如babel将其转换成ES5的语法进行使用，import实际上最终也被转换成require；
• 你如果想使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript
  代码，可以通过使用Browserify预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
• 由于chrome浏览器对ES6支持度比较高，因此上面例子中<script type='module'>....</script>通过指定type类型使得ES6语法能够被更好的运行；但是对于实际开发中，因为兼容性问题我们不是通过这种方式来使用；我们更多的是通过使用babel这类工具进行转换；