es6和CommonJS的模块化区别

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。 比如CommonJS 是在运行时加载，es6是在编译时加载也称静态加载，效率要比 CommonJS 模块的加载方式高，当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

语法差异
CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。而ES6模块化在浏览器和node.js中都可以用。
语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。
在node.js使用模块化，需要将 CommonJS 脚本的后缀名都改成.cjs，ES6 模块采用.mjs后缀文件名。或者修改package.json里面的文件，type字段为module或commonJS

在 Node.js 中使用模块化，ES6 模块与 CommonJS 模块差异

1.CommonJS 模块输出的是一个值的深拷贝，ES6 模块输出的是值的引用。
注意：CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块

2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
原因：CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
3.CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

ES6模块化
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

require到底加载哪一个模块，只有运行时才知道。import命令做不到这一点。因为require是运行时加载模块，import命令无法取代require的动态加载功能
但ES2020提案 引入import()函数，支持动态加载模块，很少用就是了

export default为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

export 和export default 的区别：
export 可以导出多个命名模块；导入的时候带花括号
export default 只能导出一个默认模块， 导入的时候没有花括号，且可匿名
1.export与export default均可用于导出常量、函数、文件、模块等
2.在一个文件或模块中，export 、import可以有多个，export default仅有一个
3.通过export方式导出，在导入时要加{ }，export default则不需要
4.export能直接导出变量表达式，export default不行

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。
如果import里面是一个对象，改写对象的属性是允许的。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性

<script type="module" src="./fo.js"></script>