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";

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 {myMember} from '/modules/my-module.js';

导入多个导出

这将foo和bar插入当前作用域。

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

导入带有别名的导出

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

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

导入时重命名多个导出

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

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

仅为其副作用导入模块

仅导入整个模块的副作用，而不导入任何绑定。这运行模块的全局代码，但实际上并没有添加任何绑定到您的项目。

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

导入默认值

可以使用默认export（无论是对象，函数，类等）。然后可以使用import语句来导入这样的默认值。

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

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

也可以使用默认语法与上述（命名空间导入或命名导入）。在这种情况下，默认导入将必须首先声明。例如：

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

示例

从辅助模块导入以协助处理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)The definition of 'Imports' in that specification.	Standard	Initial definition.
ECMAScript Latest Draft (ECMA-262)The definition of 'Imports' in that specification.	Living Standard

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	60 27 61 6	38 (14.14342) 3	54 (54) 1	No support	47 6	10.14

Feature	Android	Android Webview	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	No support	36.0	No support	No support	476	No support	60 7 61 6

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18