前言
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES Module的特性
通过给script标签加 type="module" 就可以直接使用ES Module 的标准执行其中的 JS 代码。
在不支持ES Module的浏览器中执行某个js，可以通过给script加上 nomodule ，这样不支持的浏览器就会运行这个js，而支持的浏览器则不会运行这个js
- 会自动采用严格模式，this是 undefined
- 每个js有自己的独立作用域
<script type="module">
var foo = 100
console.log(foo)
</script>
<script type="module">
console.log(foo) // foo is not defined
</script>
- 会延迟执行js脚本，不会影响到html界面固定的静态标签的展示
- script标签引入的js都会产生跨域。如果是其他网站的js，则需要引入支持跨域的，如果是自己本地的js，则开启一个本地服务器。提供一个参考
//全局安装browser-sync
npm install browser-sync -g
// 打开文件夹目录，执行命令
browser-sync . --files **/*.js
ES Module的导入与导出
- 通过export和export default导出一个模块
- 通过import引入一个模块，有以下几点需要注意
- import导入时不是解构导出对象
- 文件的后缀.js必须加上
- 可以通过 * as obj 获取到所有的导出，放到obj对象中
- 当同时使用了export和export default时，import可以用逗号分隔出默认导出对象和export导出对象
// a.js 导出的时候，可以同时使用export和export default
const name = 'sky'
const age = 18
const sex = '男'
export {
name,
age,
sex
}
export default [
1,2,3
]
// b.js
export default function () {
console.log('我是b.js')
}
// index.js
// import arr, * as obj from './a.js'
/*
arr 是export default导出的，必须放在最前面
* as obj 和 {name} 是export导出的
*/
import arr, {name} from './a.js'
import fn from './b.js'
console.log(arr, name)
fn()
ES Module运行在node环境下
- ES Module可以导入commonJS模块
- commonJS不可以导入ES Module模块
- commonJS始终只会导出一个默认成员
