ES6 exports 與 import 使用
作者：時(shí)傾
來(lái)源：SegmentFault 思否社區(qū)
在創(chuàng)建JavaScript模塊時(shí)，export 用于從模塊中導(dǎo)出實(shí)時(shí)綁定的函數(shù)、對(duì)象或原始值，以便其他程序可以通過(guò) import使用它們。
被導(dǎo)出的綁定值依然可以在本地進(jìn)行修改。
在使用import 進(jìn)行導(dǎo)入時(shí)，這些綁定值只能被導(dǎo)入模塊所讀取，但在 export 導(dǎo)出模塊中對(duì)這些綁定值進(jìn)行修改，所修改的值也會(huì)實(shí)時(shí)地更新。
exports
ES6模塊只支持靜態(tài)導(dǎo)出，只可以在模塊的最外層作用域使用export，不可在條件語(yǔ)句與函數(shù)作用域中使用。
Named exports (命名導(dǎo)出)
這種方式主要用于導(dǎo)出多個(gè)函數(shù)或者變量, 明確知道導(dǎo)出的變量名稱。
使用：只需要在變量或函數(shù)前面加 export 關(guān)鍵字即可。
使用場(chǎng)景：比如 utils、tools、common 之類的工具類函數(shù)集，或者全站統(tǒng)一變量等。
export 后面不可以是表達(dá)式，因?yàn)楸磉_(dá)式只有值，沒(méi)有名字。 每個(gè)模塊包含任意數(shù)量的導(dǎo)出。
// 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
簡(jiǎn)寫格式，統(tǒng)一列出需要輸出的變量，例如上面的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 (默認(rèn)導(dǎo)出)
這種方式主要用于導(dǎo)出類文件或一個(gè)功能比較單一的函數(shù)文件；
使用：只需要在變量或函數(shù)前面加 export default 關(guān)鍵字即可。
每個(gè)模塊最多只能有一個(gè)默認(rèn)導(dǎo)出； 默認(rèn)導(dǎo)出可以視為名字是 default的模塊輸出變量；默認(rèn)導(dǎo)出后面可以是表達(dá)式，因?yàn)樗恍枰怠?/span>
導(dǎo)出一個(gè)值：
export default 123;
導(dǎo)出一個(gè)函數(shù)：
// myFunc.js
export default function () { ... };
// index.js
import myFunc from 'myFunc';
myFunc();
導(dǎo)出一個(gè)類：
// MyClass.js
class MyClass{
constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };
// index.js
import MyClass from 'MyClass';
export default 與 export 的區(qū)別：
不需要知道導(dǎo)出的具體變量名； 導(dǎo)入【import】時(shí)不需要 { } 包裹；
Combinations exports (混合導(dǎo)出)
混合導(dǎo)出是 Named exports 和 Default exports 組合導(dǎo)出。
混合導(dǎo)出后，默認(rèn)導(dǎo)入一定放在命名導(dǎo)入前面；
// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export default class MyClass {
...
}
// index.js
import MyClass, { myValue, myFunc } from 'lib';
Re-exporting (別名導(dǎo)出)
一般情況下，export 導(dǎo)出的變量名是原文件中的變量名，但也可以用 as 關(guān)鍵字來(lái)指定別名。這樣做是為了簡(jiǎn)化或者語(yǔ)義化 export 的函數(shù)名。同一個(gè)變量允許使用不同名字輸出多次
// lib.js
function getName() {
...
};
function setName() {
...
};
export {
getName as get,
getName as getUserName,
setName as set
}
Module Redirects (中轉(zhuǎn)模塊導(dǎo)出)
為了方便使用模塊導(dǎo)入，在一個(gè)父模塊中“導(dǎo)入-導(dǎo)出”不同模塊。簡(jiǎn)單來(lái)說(shuō)：創(chuàng)建單個(gè)模塊，集中多個(gè)模塊的多個(gè)導(dǎo)出。
使用：使用 export from 語(yǔ)法實(shí)現(xiàn);
export * from 'lib'; // 沒(méi)有設(shè)置 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】沒(méi)有設(shè)置 export default
export { default as function1, function2 } from 'bar.js';
上述例子聯(lián)合使用導(dǎo)入和導(dǎo)出：
import { default as function1, function2 } from 'bar.js';
export { function1, function2 };
盡管此時(shí) export 與 import 等效，但以下語(yǔ)法在語(yǔ)法上無(wú)效：
import DefaultExport from 'bar.js'; // 有效的
export DefaultExport from 'bar.js'; // 無(wú)效的
正確的做法是重命名這個(gè)導(dǎo)出：
export { default as DefaultExport } from 'bar.js';
Importing
// Named imports
import { foo, bar as b } from './some-module.mjs';
// Namespace import
import * as someModule from './some-module.mjs';
// Default import
import someModule from './some-module.mjs';
// Combinations:
import someModule, * as someModule from './some-module.mjs';
import someModule, { foo, bar as b } from './some-module.mjs';
// Empty import (for modules with side effects)
import './some-module.mjs';
