模块导入导出

CommonJS

CommonJS 模块定义需要使用 require()指定依赖，使用 exports 对象定义自己的公共 API。

导出字符串

module.exports = 'foo'; 

var moduleA = require('./moduleB'); 
console.log(moduleB); // 'foo' 

导出对象

module.exports = { 
 a: 'A', 
 b: 'B' 
};

等价
module.exports.a = 'A'; 
module.exports.b = 'B'; 


const {a,b} = require('./moduleA')

托管类定义

class A {} 
module.exports = A; 

var A = require('./moduleA'); 
var a = new A(); 

类实例导出

class A {} 
module.exports = new A(); 

module.exports和exports

exports 等于 module.exports，相当于在js文件头部，有一个module对象，module.exports = exports

exports.a;
exports.b;
exports.c;

// 引用
var moduleA = require('./moduleA.js');
moduleA.a; 
moduleA.b;

exports = {fn1,fn2,fn3}
// 相当于 
modules.exports = {fn1, fn2,fn3}

module.exports 初始值为一个空对象 {}

exports 是指向的 module.exports 的引用

ES6

导出

ES6 模块支持两种导出：命名导出和默认导出

命名导出

export const foo = 'foo'; 

const foo = 'foo'; 
export { foo }; 

别名

const foo = 'foo'; 
export { foo as myFoo }; 

export const foo = 'foo'; 
export const bar = 'bar'; 
export const baz = 'baz'; 

const foo = 'foo'; 
const bar = 'bar'; 
const baz = 'baz'; 
export { foo, bar as myBar, baz };

默认导出

默认导出使用 default 关键字将一个值声明为默认导出，每个模块只能有一个默认导出。重复的默认导出会导致 SyntaxError。

const foo = 'foo'; 
export default foo; 

const foo = 'foo'; 
// 等同于 export default foo; 
export { foo as default }; 

因为命名导出和默认导出不会冲突，所以 ES6 支持在一个模块中同时定义这两种导出

const foo = 'foo'; 
const bar = 'bar'; 
export { bar }; 
export default foo;

const foo = 'foo'; 
const bar = 'bar'; 
export { foo as default, bar }; 

命名行内导出

export const baz = 'baz'; 
export const foo = 'foo', bar = 'bar'; 
export function foo() {} 
export function* foo() 

// 命名子句导出
export { foo }; 
export { foo, bar }; 
//别名只能在 export 子句中出现
export { foo as myFoo, bar }; 

导入

不是必须通过导出的成员才能导入模块。如果不需要模块的特定导出，但仍想加载和执行模块以利用其副作用，可以只通过路径加载它

import './foo.js'; 

引入

const foo = 'foo', bar = 'bar', baz = 'baz'; 
export { foo, bar, baz } 
import { foo, bar, baz as myBaz } from './foo.js'; 
console.log(foo); // foo 
console.log(bar); // bar 
console.log(myBaz); // baz 

import * as Foo from './foo.js'; 
console.log(Foo.foo); // foo 
console.log(Foo.bar); // bar 
console.log(Foo.baz); // baz 

默认导入

import { default as foo } from './foo.js'; 
import foo from './foo.js';

模块同时导出了命名导出和默认导出

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 const baz = 'origin:foo'; 

bar.js
export * from './foo.js'; 
export const baz = 'origin:bar'; 

main.js
import { baz } from './bar.js'; 
console.log(baz); // origin:bar