关于ES6导入导出

文章正文还需 2 分钟

在js的历史上一直没有模块（module）体系，无法将一个大程序拆分成相互依赖的小文件，再用简单的方法拼装起来，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能。

ES6导入导出也是为公司在开发框架上基础知识掌握更为扎实

变量

js 复制代码

// 导出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;
// 导入
import { myVar1, myVar2, MY_CONST } from 'src/mylib';

方法

js 复制代码

// 导出
export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
// 导入
import { myFunc, myGeneratorFunc } from 'src/mylib';

类

js 复制代码

// 导出
export class MyClass {
    ...
}
// 导入
import { myFunc } from 'src/mylib';

对象列出所有导出内容

js 复制代码

const MY_CONST = ...;
function myFunc() {
    ...
}
// 导出
export { MY_CONST, myFunc };
// 导入
import { MY_CONST, myFunc } from 'src/mylib';

导出改名

js 复制代码

// 导出
export { MY_CONST as THE_CONST, myFunc as theFunc };
// 导入
import { THE_CONST, theFunc } from 'src/mylib';

导出从其他地方导入的模块

js 复制代码

export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

默认导出(default export)

js 复制代码

//------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

命名导出结合默认导出

js 复制代码

// 导出
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };
// 导入
import _, { each } from 'underscore';

default 的别名

js 复制代码

// 相等
import { default as foo } from 'lib';
import foo from 'lib';
//------ module1.js ------
export default 123;
// 相等
//------ module2.js ------
const D = 123;
export { D as default };

仅支持静态导入导出

js 复制代码

//动态导入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//动态导出
if (Math.random()) {
    exports.baz = ...;
}