ES6模块之export和import详解

ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。

ES6的模块系统大致分为导出（export）和导入（import）两个模块。

1、模块导出（export）

可以 导出 所有的最外层 函数 、 类 以及 var 、 let 或 const 声明的变量。

ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export，不可在条件语句中使用，也不能在函数作用域中使用import。所有导出的标识符一定要在源代码中明确地导出它们的名称，不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。如下导出是错误的。

function squre() {};
if(true) {
    export {squre}; //错误
}

ES6的导出分为名字导出和默认导出

1、名字导出（name export）

名字导出可以在模块中导出多个声明。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function add (x, y) {
    return x + y;
}
 
//------ main.js ------
import { square, add } from 'lib';
console.log(square(10)); //100
console.log(add(2,4));  //6

这样导入的变量名必须和导出的名称一致。以上对于每一个要导出的变量都加了export，我们也可以直接导出一个列表，例如上面的lib.js可以改写成：

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export {sqrt, square, add}

export 列表可以在模块文件最外层作用域的每一处声明，不一定非要把它放在模块文件的末尾。

也可以直接导入整个模块，此时的main.js模块将变成这样。

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(10)); //100
console.log(lib.add(2,4));  //6

2、默认导出（default export）

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。

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

注意这里默认导出不需要用 {}。

当然也可以使用混合的导出。

//------ lib.js ------
export default function() {...};
export function each() {...};
 
//------ main.js ------
import _,{ each } from 'lib';

2、重命名export和import

为了解决导出命名冲突的问题，ES6提供了重命名的方法解决这个问题，当导入名称时可以重命名：

// 这两个模块都会导出以`flip`命名的东西。
// 要同时导入两者，我们至少要将其中一个的名称改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

同样，当导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值，这样的情况偶尔也会遇到：

function v1() { ... }
function v2() { ... }
 
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

对于默认导出，只是导出了一个特殊的名字叫 default，也可以就直接用他的名字，把它当做命名导出来用，下面两种写法是等价的：

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

也可以把名称 as为 default 来默认导出：

 //------ module1.js ------
export default 123;
 
//------ module2.js ------
const D = 123;
export { D as default };

3、作为中转模块导出

有时候为了避免上层模块导入太多的模块，我们可能使用底层模块作为中转，直接导出另一个模块的内容如下：

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

这样main.js只需导入lib模块即可，虽然myFunc模块从lib模块导出，但是lib却不能使用myFunc模块的内容。