es6模块import/export 使用总结

export/import使用总结

export

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

// profile.js 写法1
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;


// profile.js 写法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

写法1 写法2 等价  优先写法2

export命令除了输出变量，还可以输出函数或类（class）。

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

//输出函数
export function multiply(x, y) {
  return x * y;
};

// 重命名
function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};
               
写法总结
// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500 毫秒之后变成baz。

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。

import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import { firstName, lastName, year } from './profile.js';

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

最后，import语句会执行所加载的模块，因此可以有下面的写法。

import 'lodash';

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

// circle.js 导出

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// 导入1
import { area, circumference } from './circle';

console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

//导入2 整体加载
import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

export default

用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

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

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

/// 导入
// 这里的的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。
import customName from './export-default';
customName(); // 'foo'

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，

因此export default命令只能使用一次。

所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

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

// 正确
export var a = 1;

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

// 错误
export default var a = 1;


// 正确
export default 42;

// 报错
export 42;

如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样。

import _, { each, forEach } from 'lodash';

import()函数，支持动态加载模块。

import()可以放在if代码块，根据不同的情况，加载不同的模块。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

参考: https://es6.ruanyifeng.com/#docs/module