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  

浏览器兼容

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61

16

151

60

54 — 602

No4710.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No61 Yes

60

54 — 602

4710.1 No

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 8: this feature is behind the --experimental-modules runtime flag.

相关链接

文档标签和贡献者

最后编辑者: jason-grimm,