ES6 exports的几种用法

ES6模块只支持静态导出，只能够在模块的最外层做用域使用export，不可在条件语句与函数做用域中使用。

Named exports (命名导出)

这种方式主要用于导出多个函数或者变量, 明确知道导出的变量名称。
使用：只须要在变量或函数前面加 export 关键字便可。
使用场景：好比 utils、tools、common 之类的工具类函数集，或者全站统一变量等。

export 后面不能够是表达式，由于表达式只有值，没有名字。

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


// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121

// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

简写格式，统一列出须要输出的变量，例如上面的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 };

Default exports (默认导出)

这种方式主要用于导出类文件或一个功能比较单一的函数文件；
使用：只须要在变量或函数前面加 export default 关键字便可。

1. 一个模块最多只能有一个默认导出；
2. 默认导出能够视为名字是default的模块输出变量；
3. 默认导出后面能够是表达式，由于它只须要值。

export default 与 export 的主要区别：

• 不须要知道导出的具体变量名；
• 导入【import】时不须要 { } 包裹；

导出一个函数：

// myFunc.js
export default function () { ... };

// index.js
import myFunc from 'myFunc';
myFunc();

导出一个类：

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;

// index.js
import MyClass from 'MyClass';

Mixed exports (混合导出)

混合导出是Named exports和Default exports组合导出。

混合导出后，默认导入必定放在命名导入前面；

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}

// index.js 【MyClass 必须在前面】
import MyClass, { myValue, myFunc } from 'lib';

好比 lodash：

// lodash.js
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}

// index.js
import _, { each } from 'lodash';

Re-exporting (别名导出)

通常状况下，export 导出的变量名是原文件中的变量名，但也能够用 as 关键字来指定别名。这样作是为了简化或者语义化 export 的函数名。
同一个变量容许使用不一样名字输出屡次

// lib.js
function getName() {
   ...
};
function setName() {
  ...
};

export {
  getName as get,
  getName as getUserName,
  setName as set
}

Module Redirects (中转模块导出)

为了不上层模块导入太多的模块，可能使用底层模块做为中转，直接导出另外一个模块的内容。

//  myFunc.js
export default function() {...};

// Header.js
export default Header
               
// Footer.js
export default Header

// lib.js
export * from 'myFunc';
export { default as Header } from './Header';
export { default as Footer } from './Footer'
export function each() {...};
 
// index.js
import myFunc, { Header, Footer, each } from 'lib';