靜態(tài)的**import**
語句用于導(dǎo)入由另一個模塊導(dǎo)出的綁定砰盐。無論是否聲明了 strict mode
猾警,導(dǎo)入的模塊都運行在嚴格模式下链韭。在瀏覽器中其徙,import
語句只能在聲明了 type="module"
的 script
的標簽中使用。
此外,還有一個類似函數(shù)的動態(tài) import()
压昼,它不需要依賴 type="module"
的script標簽送滞。
在 script 標簽中使用 nomodule
屬性,可以確保向后兼容朽褪。
在您希望按照一定的條件或者按需加載模塊的時候置吓,動態(tài)import()
是非常有用的。而靜態(tài)型的 import
是初始化加載依賴項的最優(yōu)選擇鞍匾,使用靜態(tài) import
更容易從代碼靜態(tài)分析工具和 tree shaking 中受益交洗。
語法
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");//這是一個處于第三階段的提案。
name
參數(shù)是“導(dǎo)入模塊對象”的名稱橡淑,它將用一種名稱空間來引用導(dǎo)入模塊的接口构拳。export參數(shù)指定單個的命名導(dǎo)出,而import * as name
語法導(dǎo)入所有導(dǎo)出接口梁棠,即導(dǎo)入模塊整體置森。以下示例闡明該語法。
導(dǎo)入整個模塊的內(nèi)容
這將myModule
插入當(dāng)前作用域符糊,其中包含來自位于/modules/my-module.js
文件中導(dǎo)出的所有接口凫海。
import * as myModule from '/modules/my-module.js';
在這里,訪問導(dǎo)出接口意味著使用模塊名稱(在本例為“myModule”)作為命名空間男娄。例如行贪,如果上面導(dǎo)入的模塊包含一個接口doAllTheAmazingThings()
,你可以這樣調(diào)用:
myModule.doAllTheAmazingThings();
導(dǎo)入單個接口
給定一個名為myExport
的對象或值模闲,它已經(jīng)從模塊my-module
導(dǎo)出(因為整個模塊被導(dǎo)出)或顯式地導(dǎo)出(使用export
語句)建瘫,將myExport
插入當(dāng)前作用域。
import {myExport} from '/modules/my-module.js';
導(dǎo)入多個接口
這將foo
和bar
插入當(dāng)前作用域尸折。
import {foo, bar} from '/modules/my-module.js';
導(dǎo)入帶有別名的接口
你可以在導(dǎo)入時重命名接口啰脚。例如,將shortName
插入當(dāng)前作用域实夹。
import {reallyReallyLongModuleExportName as shortName}
from '/modules/my-module.js';
導(dǎo)入時重命名多個接口
使用別名導(dǎo)入模塊的多個接口橄浓。
import {
reallyReallyLongModuleMemberName as shortName,
anotherLongModuleName as short
} from '/modules/my-module.js';
僅為副作用而導(dǎo)入一個模塊
整個模塊僅為副作用(中性詞粒梦,無貶義含義)而導(dǎo)入,而不導(dǎo)入模塊中的任何內(nèi)容(接口)荸实。 這將運行模塊中的全局代碼, 但實際上不導(dǎo)入任何值匀们。
import '/modules/my-module.js';
導(dǎo)入默認值
引入模塊可能有一個default
export
(無論它是對象,函數(shù)泪勒,類等)可用昼蛀。然后可以使用import
語句來導(dǎo)入這樣的默認接口。
最簡單的用法是直接導(dǎo)入默認值:
import myDefault from '/modules/my-module.js';
也可以同時將default
語法與上述用法(命名空間導(dǎo)入或命名導(dǎo)入)一起使用圆存。在這種情況下叼旋,default
導(dǎo)入必須首先聲明。 例如:
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
動態(tài)import
關(guān)鍵字import可以像調(diào)用函數(shù)一樣來動態(tài)的導(dǎo)入模塊沦辙。以這種方式調(diào)用夫植,將返回一個 promise
。
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
這種使用方式也支持 await
關(guān)鍵字油讯。
let module = await import('/modules/my-module.js');