命名导入导出(named exports)
变量
// 导出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
// 导入
import { myVar1, myVar2, MY_CONST } from 'src/mylib';
方法
// 导出
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
// 导入
import { myFunc, myGeneratorFunc } from 'src/mylib';
类
// 导出
export class MyClass {
...
}
// 导入
import { myFunc } from 'src/mylib';
对象列出所有导出内容
const MY_CONST = ...;
function myFunc() {
...
}
// 导出
export { MY_CONST, myFunc };
// 导入
import { MY_CONST, myFunc } from 'src/mylib';
导出改名
// 导出
export { MY_CONST as THE_CONST, myFunc as theFunc };
// 导入
import { THE_CONST, theFunc } from 'src/mylib';
导出从其他地方导入的模块
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';
默认导出(default export)
//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
命名导出结合默认导出
// 导出
export default function (obj) {
...
};
export function each(obj, iterator, context) {
...
}
export { each as forEach };
// 导入
import _, { each } from 'underscore';
default 的别名
// 相等
import { default as foo } from 'lib';
import foo from 'lib';
//------ module1.js ------
export default 123;
// 相等
//------ module2.js ------
const D = 123;
export { D as default };
仅支持静态导入导出
//动态导入
var mylib;
if (Math.random()) {
mylib = require('foo');
} else {
mylib = require('bar');
}
//动态导出
if (Math.random()) {
exports.baz = ...;
}
为什么要这么做,主要是两点:
- 性能,在编译阶段即完成所有模块导入,如果在运行时进行会降低速度
- 更好的检查错误,比如对变量类型进行检查