ES6 Module export命令 和 import命令

---

详细版本： JavaScript 模块体系

export 命令

// 写法1、直接导出
export var firstName = 'Michael';

// 写法2、变量导出
var firstName = 'Michael';
export { firstName };

// 写法3、重命名导出
function v1() { ... }
export { v1 as streamV1 };

import 命令

// 写法1、直接导入
import { lastName } from './profile.js';

// 写法2、重命名导入
import { lastName as surname } from './profile.js';

// 写法3、整体导入
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

export default 命令

导出

// export-default.js
// 写法1、匿名函数
export default function () {
  console.log('foo');
}

// 写法2、函数声明
export default function foo() {
  console.log('foo');
}

// 写法3、变量
function foo() {
  console.log('foo');
}

export default foo;

• 注意。因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句

// export-default.js

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

导入

// import-default.js
import customName from './export-default'; // * 不加大括号
customName(); // 'foo'