import语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。在浏览器中, import语句只能在声明了type="module"script的标签中使用。

此外还有一个类似函数的动态import(),它不需要依赖type="module"的script标签。

script标签中使用nomodule属性,可以确保向后兼容。

在您希望按照一定的条件或者按需加载模块的时候,动态import()是非常有用的。而静态的import是初始化加载的最优选择,使用静态import更容易从代码静态分析工具和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");
defaultExport
将引用模块默认导出的名称。
module-name
要导入的模块。这通常是包含模块的.js文件的相对或绝对路径名,不包括.js扩展名。某些打包工具可以允许或要求使用该扩展;检查你的运行环境。只允许单引号和双引号的字符串。
name
引用时将用作一种命名空间的模块对象的名称。
export, exportN
要导入的导出名称。
alias, aliasN
将引用指定的导入的名称。

描述

name参数是“模块对象”的名称,它将用一种名称空间来引用导出。导出参数指定单个命名导出,而import * as name语法导入所有导出。以下示例阐明该语法。

导入整个模块的内容

这将myModule插入当前作用域,其中包含来自位于/modules/my-module.js文件中导出的所有模块。

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

在这里,访问导出意味着使用模块名称(在这种情况下为“myModule”)作为命名空间。例如,如果上面导入的模块包含一个doAllTheAmazingThings(),你可以这样调用:

myModule.doAllTheAmazingThings();

导入单个导出

给定一个名为myExport的对象或值,它已经从模块my-module导出(因为整个模块被导出)或显式地导出(使用export语句),将myExport插入当前作用域。

import {myExport} from '/modules/my-module.js';

导入多个导出

这将foobar插入当前作用域。

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

导入带有别名的导出

导入时可以重命名导出。例如,将shortName插入当前作用域。

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

导入时重命名多个导出

使用别名导入模块的多个导出。

import {
  reallyReallyLongModuleMemberName as shortName, 
  anotherLongModuleName as short
} from '/modules/my-module.js';

仅为副作用而导入一个模块

模块仅为副作用(中性词,无贬义含义)而导入,而不导入模块中的任何内容。 这将运行模块中的全局代码, 但实际上不导入任何值。

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称作动态导入模块的函数,当使用它的时候,会返回一个promise

 

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

这种使用方式也支持await关键字。

 

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

 

 

示例

标准import

从辅助模块导入以协助处理AJAX JSON请求。

模块:file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

主程序:main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

动态import

此示例展示了如何通过用户操作去加载功能模块到页面上,在例子中通过点击按钮,触发动态import()去加载函数,然后执行。当然这不是唯一的方式,import()函数也可以支持await

 

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", e => {
    e.preventDefault();

    import('/modules/my-module.js')
      .then(module => {
        module.loadPageInto(main);
      })
      .catch(err => {
        main.textContent = err.message;
      });
  });
}

 

规范

Specification Status Comment
"function-like" dynamic import()proposal Stage 3  
ECMAScript Latest Draft (ECMA-262)
Imports
Draft  
ECMAScript 2018 (ECMA-262)
Imports
Standard  
ECMAScript 2017 (ECMA-262)
Imports
Standard  
ECMAScript 2016 (ECMA-262)
Imports
Standard  
ECMAScript 2015 (6th Edition, ECMA-262)
Imports
Standard Initial definition.

浏览器兼容

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Basic supportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Edge Mobile Full support YesFirefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs Full support 8.5.0
Notes Disabled
Full support 8.5.0
Notes Disabled
Notes files must have suffix .mjs, not .js
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Full support 63Edge No support No
Notes
No support No
Notes
Notes See development status.
Firefox No support No
Notes
No support No
Notes
Notes See bug 1342012.
IE No support NoOpera Full support 50Safari Full support 11.1WebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1342012.
Opera Android Full support 50Safari iOS Full support 11.1Samsung Internet Android ? nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

相关链接

文档标签和贡献者

最后编辑者: daihaoxin,