import

import 语句 用于从一个已经导出的外部模块或另一个脚本中导入函数，对象或原始类型。

注意：此功能目前无法在任何浏览器中实现。它在许多转换器中实现，例如 Traceur Compiler ， Babel ， Rollup 或 Webpack。

语法

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
name
指向导入模块的对象的名称。
member, memberN
将要导入的导出成员的名称。
defaultMember
将引用从模块默认导出的名称。
alias, aliasN
将引用命名导入的名称。
module-name
要导入的模块的名称。

描述

name 参数是将引用导出成员的名称。member参数指定独立成员，而name参数导入所有成员。如果模块导出单个默认参数，而不是一系列成员，name也可以是函数。
下面提供一些示例说明语法。

导入整个模块的内容。以下代码将myModule添加到当前作用域，其中包括所有导出绑定。

import  * as myModule from "my-module";

导入模块的单个成员。以下代码将myMember添加到当前作用域。

import {myMember} from "my-module";

导入模块的多个成员。以下代码会将foo和bar都添加到当前作用域。

import {foo, bar} from "my-module";

导入整个模块的内容，其中一些被显式命名。
以下代码将MyModule，foo，bar插入到当前作用域。其中，MyModule是"my-module"模块中的export default 暴露的模块，而foo和bar则只是“my-module”代码中 export 暴露的对象中的 foo和 bar 属性。

import MyModule, {foo, bar} from "my-module";

导入成员并指定一个方便的别名。以下代码将shortName添加到当前作用域。

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

导入整个模块 使用模块副作用，不导入任何绑定。

import "my-module";

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

import {
  reallyReallyLongModuleMemberName as shortName,
  anotherLongModuleName as short
} from "my-module";

默认值

可以导出默认选项，无论是一个对象，一个函数或一个 class。相对地， 也可以使用 import 导入默认成员。

最简单版本，直接导入默认。

import myDefault from "my-module";

也可以使用上面提到的方式导入命名空间。

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 "file";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

规范

规范 状态 注解
ECMAScript 2015 (6th Edition, ECMA-262)
Imports		 Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
Imports		 Draft  

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现[2] Build 14342[3] 未实现[1] 未实现 未实现 Tech Preview 21[4]
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 36.0 未实现 未实现 未实现 未实现 36.0

[1] 查看 bug 568953.

[2] 查看 Chromium bug 1569

[3]  "启用实验性JavaScript功能" 标记的背后

[4] See Safari Technical Preview 21 版本注释

也可以看看

 

文档标签和贡献者