ES6 exports 與 import 使用

作者：時傾

來源：SegmentFault 思否社區

在創建 JavaScript 模塊時，export 用於從模塊中導出實時綁定的函數、對象或原始值，以便其他程序可以通過 import使用它們。
被導出的綁定值依然可以在本地進行修改。
在使用 import 進行導入時，這些綁定值只能被導入模塊所讀取，但在 export 導出模塊中對這些綁定值進行修改，所修改的值也會實時地更新。

exports

ES6 模塊只支持靜態導出，只可以在模塊的最外層作用域使用export，不可在條件語句與函數作用域中使用。

Named exports (命名導出)

這種方式主要用於導出多個函數或者變量, 明確知道導出的變量名稱。
使用：只需要在變量或函數前面加 export 關鍵字即可。
使用場景：比如 utils、tools、common 之類的工具類函數集，或者全站統一變量等。

  1. export 後面不可以是表達式，因爲表達式只有值，沒有名字。

  2. 每個模塊包含任意數量的導出。

// 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 123;

導出一個函數：

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

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

導出一個類：

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };

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

export default 與 export 的區別：

Combinations 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
import MyClass, { myValue, myFunc } from 'lib';

Re-exporting (別名導出)

一般情況下，export 導出的變量名是原文件中的變量名，但也可以用 as 關鍵字來指定別名。這樣做是爲了簡化或者語義化 export 的函數名。同一個變量允許使用不同名字輸出多次

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

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

Module Redirects (中轉模塊導出)

爲了方便使用模塊導入，在一個父模塊中 “導入 - 導出” 不同模塊。簡單來說：創建單個模塊，集中多個模塊的多個導出。
使用：使用 export from 語法實現;

export * from 'lib'; // 沒有設置 export default
export * as myFunc2 from 'myFunc'; // 【ES2021】沒有設置 export default
export { default as function1, function2 } from 'bar.js';

上述例子聯合使用導入和導出：

import { default as function1, function2 } from 'bar.js';
export { function1, function2 };

儘管此時 export 與 import 等效，但以下語法在語法上無效：

import DefaultExport from 'bar.js'; // 有效的
export DefaultExport from 'bar.js'; // 無效的

正確的做法是重命名這個導出：

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';
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/IQtgUKtueC_fc2er0vtMoQ

猜你喜歡