ES6之export和import命令

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

我们知道一个模块就是一个独立的文件，该文件内的所有变量、函数类等，外部都无法获取。如果外部的某个文件希望获取，就必须使用export关键字导出。

note：ES6只支持静态导入和导出，不可以出现在条件语句中，也不可以出现在函数作用域中。其可以出现在模块的任何位置，确保在模块顶层即可。

• 名字导出/导入：

//------ a.js ------
export const str = "Hello";
export function sum(a,b) {
	return a + b;
}
//------ b.js ------
import { str, sum } from 'a';
console.log(str); //Hello
console.log(sum(2,5));  //7

上述导入的变量名必须和导出的名称一致。以上对于每一个要导出的变量都加了export，我们也可以直接导出一个列表，在export命令后面使用大括号指定要输出的一组变量，例如上面的a.js可以改写成：

//------ a.js ------
const str = "Hello";
function sum(a,b) {
	return a + b;
}

export {str, sum }

• 重命名导出/导入：

export和import也可以使用as关键字重命名。这样可以在导出时用两个不同的名称导出相同的值；在导入时解决导出命名冲突的问题。

function f1() { ... }
function f2() { ... }
 
export {
  f1 as streamV1,
  f2 as streamV2,
  f2 as streamLatestVersion
};

import {sum as add} from 'a';
import {sum as all} from 'b';

• 默认导出（default export）

在一个文件或模块中，export、import可以有多个，export default仅有一个；通过export方式导出，在导入时要加{ }，export default导出后在导入时则不需要{ }。

//a.js 
const str = “hello”; 
export default str; 
//b.js  
import str from ‘a’;  //导入的时候没有花括号 

本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。因此对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。

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

同样下面两种写法是等价的： 

import { default as foo } from 'a';
import foo from 'a';

note:如果在一个模块中先输入后输出同一个模块，import语句可以与export语句写在一起。

export { es6 as default } from './someModule';
//等同于
import { es6 } from './someModule';
export default es6;