ES Module 是ES6新增的模块化规范。
通过给script添加type = 'module'的属性，就可以以ES Module的标准执行其中的JS代码。

某些浏览器不支持ES Module，我们可以通过一些编译工具去处理。
当给script标签添加了nomodule属性，它就只会在不支持ES Module的浏览器中工作。

<script type="module" src="xxx"></script>

ES Module 特性

1. 自动采用严格模式，不再需要额外添加'use strict'。比如，在严格模式下，不能去全局使用this。
2. 每一个ES Module都是运行在单独的私有作用域中。在使用每一个ES Module中的全局变量时，不会造成全局污染。
3. ES Module是通过CORS的方式请求外部资源的。所以，script标签的src地址所请求的资源，需要所请求的服务器支持CORS跨域。
4. ES Module的script标签会延迟执行脚本。同script标签中使用defer属性一样。

   网页遇到script标签默认是立即执行，页面渲染会等这个脚本执行完成才会继续往下渲染。
   延迟执行：等网页渲染完成之后再去执行脚本。这样不会阻碍页面当中元素的显示。

ES Module 导出

// module.js
export const name = "张三";

export function hello() {
  console.log("hello");
}

export class Person {}

// app.js

import { name, hello, Person } from "./module.js";
console.log(name);
hello();
new Person();

• 对输出成语进行重命名：

// module.js
const name = "张三";
export { name as myName};

// app.js
import { myName } from "./module.js";

• 导出默认成员：

// module.js
export default name = "张三";
// or
const name = "张三";
export { name as default };

// app.js
import A from "./module.js";
// or
import { default as A } from "./module.js";

• 只执行某个模块，不需要提取模块当中的成员：

  比如导入某些第三方库的样式。

// app.js

import {} from "https://xxx";
// or 简写
import 'https://xxx';

• 导出所有成员：

// app.js
import * from "./module.js";
import * as mod from "./module.js";

• 动态导入，使用import函数，这个函数会返回一个Promise对象（模块加载时异步的）：

// app.js
const url = "./module.js";
import(url).then(function (module) {
  console.log(module);
});

• 导出模块（可以理解为中转站）：

// module1.js
export const name1 = "张三";
// module2.js
export default name2 = "李四";

// index.js
import { name1 } from "./module1.js";
import { default as name2 } from "./module2.js";
export { name1, name2 };
// or
export { name1 } from "./module1.js";
export { default as name2 } from "./module2.js";

// app.js
import { name1, name2 } from "./index.js";