超简单1分钟了解 ES6 导入导出

5,045 阅读1分钟

命名导入导出(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 = ...;
}

为什么要这么做,主要是两点:

  • 性能,在编译阶段即完成所有模块导入,如果在运行时进行会降低速度
  • 更好的检查错误,比如对变量类型进行检查