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';