import语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。

现在浏览器们才刚刚开始去实现这个功能。但它在许多转换器中已经实现,例如 Traceur Compiler , Babel , Rollup 或 Webpack

语法

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 { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
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 "my-module";

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

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

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

导入默认值

defaultexport(无论是对象,函数,类等)有效时可用。然后可以使用import语句来导入这样的默认值。

最简单的用法是直接导入默认值:

import myDefault from "my-module";

也可以同时将default语法与上述用法(命名空间导入或命名导入)一起使用。在这种情况下,default导入必须首先声明。 例如:

import myDefault, * as myModule from "my-module";
// myModule used as a namespace

或者

import myDefault, {foo, bar} from "my-module";
// specific, named imports

示例

从辅助模块导入以协助处理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); });

规范

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
Imports
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
Imports
Draft  

浏览器兼容

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung 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 No support NoChrome 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.

相关链接

文档标签和贡献者

最后编辑者: jason-grimm,