【JS基础】ES6模块系统

export#

export 导出方式有两种，命名导出和默认导出。

• 命名导出还是默认导出都是都导出模块中内容的一种方式，可以混合使用。
• 个人理解：默认导出其实是导出了default别名变量。
• 一个模块只能有一个默认导出
• 不同的导出方式也对应了不同的导入方式

// 命名行内导出
export const baz = 'baz';
export const foo = 'foo', bar = 'bar';
export function foo() {}
export function* foo() {}
export class Foo {}
// 命名子句导出
export { foo };
export { foo, bar };
export { foo as myFoo, bar };
// 默认导出
export default 'foo';
export default 123;
export default /[a-z]*/;
export default { foo: 'foo' };
export { foo, bar as default };
export default foo
export default function() {}
export default function foo() {}
export default function*() {}
export default class {}

import#

• 导入对模块而言是只读的，相当于const 变量

• import导入的值是无法直接修改的，但可以修改导入对象的属性。

import foo, * as Foo './foo.js';
foo = 'foo'; // 错误
Foo.foo = 'foo'; // 错误
foo.bar = 'bar'; // 允许

• 对应不同的导出方式，需要使用不同的导入方式：

// export.js
const foo = 'foo', bar = 'bar', baz = 'baz';
export { foo, bar, baz }
export default foo


// import .js
import * as Foo from './foo.js'; // 导入命名导出内容
import { foo, bar, baz as myBaz } from './foo.js';  // 导入命名导出内
// 导入默认导出的内容
import { default as foo } from './foo.js';//导入默认导出，与下边等效
import foo from './foo.js';//导入默认导出，与上边边等效

• 如果模块同时使用了命名导出和默认导出，可以这样来在import中同时导入

import foo, { bar, baz } from './foo.js';
import { default as foo, bar, baz } from './foo.js';
import foo, * as Foo from './foo.js';

模块转移导出#

// 导出foo.js所有命名导出
export * from './foo.js';
// 将foo.js中默认导出修改为命名导出
export {default as foo} from './foo.js'

在组件库或函数库中，我们经常能看到模块转移导出，将需要导出到外部的内容有一个统一的出口，这时要注意导出名称是否会重名等问题