导入和导出作为 ES Modules 的核心功能，主要是由 export 和 import 这两个关键词构成。export 命令是用于在模块内去对外暴露接口，而 import 命令则是在模块内去倒入其他模块所提供的接口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES Module 导出与导入</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>
ES modules 中每一个模块成员都会运行在独立的私有作用域当中，所以说模块内所有的成员都没有办法直接在外部被访问到。如果说我们需要去对外提供某些成员例如我们要把下面的 name 暴露出去，就必须要通过 export 关键词去修饰一下 name 的变量声明。
// module.js
export var name = 'foo module'
// app.js
import { name } from './module.js'
console.log(name) // foo module
除了可以使用 export 修饰变量的声明，还可以通过 export 去修饰函数的声明，这样的话函数也可以作为模块的导出成员。
// module.js
export function hello () {
console.log('hello')
}
// app.js
import { hello } from './module.js'
hello() // hello
类的声明也是一样的，都是可以通过 export 这种方式去导出的。
// module.js
export class Person {
constructor (name) {
this.name = name
}
}
// app.js
import { Person } from './module.js'
const p = new Person('Leo')
console.log(p.name) // Leo
除了这种修饰成员声明这种使用方式，export 一般还可以用来单独去使用具体的操作方式就是，将变量声明之前的这些 export 都删除然后在模块的最底部导出对象的方式。
// module.js
var name = 'foo module'
function hello () {
console.log('hello')
}
class Person {
constructor (name) {
this.name = name
}
}
export { name, hello, Person }
// app.js
import { name, hello, Person } from './module.js'
console.log(name) // foo module
hello() // hello
const p = new Person('Leo')
console.log(p.name) // Leo
除此之外还可以通过这种方式去为输出的成员重命名，具体的做法就是通过 as 关键词实现。
// module.js
var name = 'foo name'
export { name as fooName}
// app.js
import { fooName } from './module.js'
console.log(fooName) // foo name
重命名使用过程中会有一个特殊的情况，就是我们一旦将导出成员的名称设置为 default 的话，这个成员就会作为当前这个模块默认导出的成员。在导入这个成员的时候就必须要去给这个成员去给这个成员重命名了，因为default 是个关键词
// module.js
var name = 'foo name'
export {name as default}
// app.js
import {default as fooname} from './module.js'
console.log(foonname) // foo name
不仅如此在 ES Modules 当中还专门为 default 设计了一个特殊的用法，这个用法就是直接通过 export default 后面跟上一个变量，这样就可以将这个变量作为我们当前这个模块的默认导出,在导入的时候也可以通过直接 import 一个变量名的方式去接收这个模块默认导出的成员。这个变量名就可以根据需要随便去取。
export defualt var name = 'foo name'
// app.js
import fooname from './module.js'
console.log(foonname) // foo name
