JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

1
2
3
4
// 导出一个变量
export let a = '123';
// 引入导出的文件
import { a } from './1.js';

导出和引入模块

方式一

导出 1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    // 导出一个变量
    export let a = '123';
    // 导出一个方法
    export function test() {
        console.log('test');
    }
    // 导出一个类
    export class Hello {
        test() {
            console.log('class');
        }
    }
}

在 2.js 中引入 1.js

1
2
3
4
5
6
7
8
9
10
11
{
    // 单个引入
    import { a, test, Hello } from './1.js';
    // 使用
    console.log(a, test, Hello);
    // 创建别名 全部引入
    import * as all from './1s.js'
    // 使用
    console.log(all.a, all.test, all.Hello);
}

方式二

默认导出，在当前文件中定义需要导出的内容。 1.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    let a = '123';
    function test() {
        console.log('test');
    }
    class Hello {
        test() {
            console.log('class');
        }
    }
    export default {
        a,
        test,
        Hello
    }
}

默认引入 1.js

1
2
3
{
    import all from './1.js'; 
}