import語句、import()、require() 用法和區別

 

import語句和import()屬於ES6語法，而require()屬於node中的。其中import()是ES2020引入函數，支持動態加載模塊。

import命令能夠接受什么參數，import()函數就能接受什么參數，兩者區別主要是后者為動態加載。

import是靜態加載資源，編譯時放到代碼塊最頂層。

import()函數則是動態按需加載返回Promise 對象。import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。

import()函數它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊。

import()函數與所加載的模塊沒有靜態連接關系，這點也是與import語句不相同。import()類似於 Node 的require方法，區別主要是前者是異步加載，后者是同步加載。

 

參數	是否動態加載	與所加載的模塊是否有靜態連接關系
import語句	引入的地址路徑	否	是
import()	引入的地址路徑	是（異步加載）	否
require()	引入的地址路徑	是（同步加載）	否

 

 

 

參考資料： Native ECMAScript modules: dynamic import()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

 

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");//這是一個處於第三階段的提案。

 

 defaultExport

導入模塊的默認導出接口的引用名。

module-name

要導入的模塊。通常是包含目標模塊的.js文件的相對或絕對路徑名，可以不包括.js擴展名。某些特定的打包工具可能允許或需要使用擴展或依賴文件，它會檢查比對你的運行環境。只允許單引號和雙引號的字符串。name

導入模塊對象整體的別名，在引用導入模塊時，它將作為一個命名空間來使用。

export, exportN

被導入模塊的導出接口的名稱。

alias, aliasN

將引用指定的導入的名稱。

 

描述

name參數是“導入模塊對象”的名稱，它將用一種名稱空間來引用導入模塊的接口。export參數指定單個的命名導出，而import * as name語法導入所有導出接口，即導入模塊整體。以下示例闡明該語法。

導入整個模塊的內容

 

這將myModule插入當前作用域，其中包含來自位於/modules/my-module.js文件中導出的所有接口

 

import * as myModule from '/modules/my-module.js';

 

在這里，訪問導出接口意味着使用模塊名稱（在本例為“myModule”）作為命名空間。例如，如果上面導入的模塊包含一個接口doAllTheAmazingThings()，你可以這樣調用：

 

myModule.doAllTheAmazingThings();

僅為副作用而導入一個模塊

整個模塊僅為副作用（中性詞，無貶義含義）而導入，而不導入模塊中的任何內容（接口）。 這將運行模塊中的全局代碼, 但實際上不導入任何值。

 

import '/modules/my-module.js';

 

導入默認值

引入模塊可能有一個defaultexport（無論它是對象，函數，類等）可用。然后可以使用import語句來導入這樣的默認接口。

 最簡單的用法是直接導入默認值：

 

import myDefault from '/modules/my-module.js';

 

 也可以同時將default語法與上述用法（命名空間導入或命名導入）一起使用。在這種情況下，default導入必須首先聲明。 例如：

 

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

 

或者

 

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

動態import

標准用法的import導入的模塊是靜態的，會使所有被導入的模塊，在加載時就被編譯（無法做到按需編譯，降低首頁加載速度）。有些場景中，你可能希望根據條件導入模塊或者按需導入模塊，這時你可以使用動態導入代替靜態導入。下面的是你可能會需要動態導入的場景：

• 當靜態導入的模塊很明顯的降低了代碼的加載速度且被使用的可能性很低，或者並不需要馬上使用它。
• 當靜態導入的模塊很明顯的占用了大量系統內存且被使用的可能性很低。
• 當被導入的模塊，在加載時並不存在，需要異步獲取
• 當導入模塊的說明符，需要動態構建。（靜態導入只能使用靜態說明符）
• 當被導入的模塊有副作用（這里說的副作用，可以理解為模塊中會直接運行的代碼），這些副作用只有在觸發了某些條件才被需要時。（原則上來說，模塊不能有副作用，但是很多時候，你無法控制你所依賴的模塊的內容）

請不要濫用動態導入（只有在必要情況下采用）。靜態框架能更好的初始化依賴，而且更有利於靜態分析工具和tree shaking發揮作用

關鍵字import可以像調用函數一樣來動態的導入模塊。以這種方式調用，將返回一個 promise。

 

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

 

這種使用方式也支持 await 關鍵字。

 

let module = await import('/modules/my-module.js');