淺談動態導入ECMAScript模組的方法

ECMAScript(又稱ES2015或ES)模組是在JavaScript中組織內聚程式碼區塊的一種方法。

ES模組系統有2個部分：

• import#」模組- 使用import { func } from './myModule'
• #export模組-  使用export const func = () => {}

import 模組是使用import 語法導入依賴項的模組:

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

而被導入的模組使用export語法從自身導出元件:

export const concat = (paramA, paramB) => paramA + paramB;

import { concat } from './concatModule'

使用ES模組的方式是靜態的：意味著模組之間的依賴關係在編譯時就已經知道了。 雖然靜態導入在大多數情況下是有效的，但有時我們想節省客戶的頻寬並有條件地載入模組。

為了實現這一點，我們可以用不同的方式使用 import(pathToModule) 語法對模組進行新的動態導入：作為一個函數。動態導入是從ES2020開始的一個JavaScript語言特性。

1. 動態模組的導入#當

import

關鍵字用作函數而不是靜態導入語法:

const module = await import(pathToModule);

它傳回一個

promise

，並開始一個載入模組的非同步任務。如果模組被成功加載，那麼

promise

就會解析到模組的內容，否則，promise 就會被拒絕。 請注意，

pathToModule

可以是任何表達式，其值為表示導入模組路徑的字串。有效的值是普通的字串字面意義（如./myModule）或有字串的變數。

例如，我們在一個非同步函數中載入一個模組。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

有趣的是，與靜態導入相反，動態導入接受以模組路徑求值的表達式<pre class="brush:js;toolbar:false;">async function loadMyModule(pathToModule) { const myModule = await import(pathToModule); // ... use myModule } loadMyModule(&amp;#39;./myModule&amp;#39;);</pre>現在，了解如何載入模組後，我們來看看如何從導入的模組中提取組件。

2.導入元件

2.1 導入命名元件

考慮下面的模組：<pre class="brush:js;toolbar:false;">// namedConcat.js export const concat = (paramA, paramB) =&gt; paramA + paramB;</pre>這裡匯出了一個

concat

函數。 如果想要動態匯入namedConcat.js，並且存取命名的匯出

concat

，那麼只需通解構的方式就行了：<pre class="brush:js;toolbar:false;">async function loadMyModule() { const { concat } = await import(&amp;#39;./namedConcat&amp;#39;); concat(&amp;#39;b&amp;#39;, &amp;#39;c&amp;#39;); // =&gt; &amp;#39;bc&amp;#39; } loadMyModule();</pre>

2.2 預設導出

如果模組是預設導出的，我們可以使用

default

屬性來存取。 還是上面的例子，我們將

defaultConcat.js

裡面的

concat

函數預設匯出:

// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;

在動態匯入模組中,可以使用default屬性來存取:

async function loadMyModule() {
  const { default: defaultImport } = await import('./defaultConcat');
  defaultImport('b', 'c'); // => 'bc'
}

loadMyModule();

注意，default在JavaScript中是一個關鍵字，所以它不能用作變數名稱。

2.3導入混合形式如果模組裡面既有預設導出也有命名導出，同樣也是使用解構的方式來存取：

async function loadMyModule() {
  const { 
    default: defaultImport,
    namedExport1,
    namedExport2
  } = await import('./mixedExportModule');
  // ...
}

loadMyModule();

3.何時使用動態導入

建議在模組比較大的，或是要依照條件才導入的模組可以使用動態導入。

async function execBigModule(condition) {
  if (condition) {
    const { funcA } = await import('./bigModuleA');
    funcA();
  } else {
    const { funcB } = await import('./bigModuleB');
    funcB();
  }
}

execBigModule(true);

對於小模組(如前面例子中的namedConcat.js或

defaultConcat.js

)，只有幾十行程式碼，使用動態導入在點殺雞用牛刀感覺。

總結

當呼叫import(pathToModule) 作為函數時，其參數表示一個模組的指定符（又稱路徑），那麼就會動態載入該模組。

###在這種情況下，###module = await import(pathToModule)### 傳回一個 promise ，該承諾解析為一個包含導入模組元件的物件。 ######Node.js（13.2以上版本）和大多數現代瀏覽器都支援動態導入。 #########英文原文網址：https://dmitripavlutin.com/ecmascript-modules-dynamic-import/######作者：Dmitri Pavlutin##########更多程式設計相關知識，請造訪：###程式設計影片###！ ！ ###

以上是淺談動態導入ECMAScript模組的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！