模块

export

用于规定模块的对外接口

  • 两种写法
1
2
3
4
5
6
7
8
// 分别导出,必须在定义的时候
export var a = 'a'
export var b = 'b'
// 整体导出,必须放在大括号内
var a = 'a';
var b = 'b';
export {a, b};
  • 可以导出类或者函数
1
2
export class Demo{}
export function demo(){}
  • 使用as将输出的变量重命名
1
2
3
4
5
6
function a(){}
function b(){}
export {
a as a1, // 外部使用时,获取到的是a1
b as b1 // 外部使用时,获取到的是b1
}
  • 必须在模块顶层调用,不能处于模块内的块级作用域中
1
2
3
{
export var a = 1; // babel编译直接报错
}

import

加载模块

  • 几种写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 作为整体导入)
    import obj from './xxx'; // './xxx'中的所有export都会作为obj(任意定义)的属性
    // *号导入
    import * as obj from './xxx'; // 同上一种写法相同
    // 分别导入(解构赋值)
    import {a1, b1} from './xxx'; // './xxx'中exporta1, b1
    // 整体和部分导入
    import obj, {a1} from './xxx';
  • 使用as关键字,将导入的变量重命名

1
2
3
import {
a1 as a2 // './xxx'中导出a1,这里重命名为a2
} from './xxx';
  • import会提升到模块头部执行
1
2
var a = 1;
improt {a1} from './xxx'; // 这句会提前到顶部执行
  • 可以不导入值,进做加载执行用
1
import './xxx';

export default

  • 使用default导出的变量,在使用import导入时,可以任意定义导入的变量名,不需要和导出时一致。
1
2
3
4
5
// a.js
export default class Demo{}
// b.js
import Haha from './a';