import
The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.
Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
Syntax
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
- Name of the object that will receive the imported values.
member, memberN
- Name of the exported members to be imported.
defaultMember
- Name of the exported default to be imported.
alias, aliasN
- Name of the object that will receive the imported property
module-name
- The name of the module to import. This is a file name.
Description
The name
parameter is the name of the object that will receive the exported members. The member
parameters specify individual members, while the name
parameter imports all of them. name
may also be a function if the module exports a single default parameter rather than a series of members. Below are examples to clarify the syntax.
Import an entire module's contents. This inserts myModule
into the current scope, containing all the exported bindings from "my-module.js".
import * as myModule from "my-module";
Import a single member of a module. This inserts myMember
into the current scope.
import {myMember} from "my-module";
Import multiple members of a module. This inserts both foo
and bar
into the current scope.
import {foo, bar} from "my-module";
Import a member with a more convenient alias. This inserts shortName
into the current scope.
import {reallyReallyLongModuleMemberName as shortName} from "my-module";
Import multiple members of a module with convenient aliases.
import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";
Import an entire module for side effects only, without importing any bindings.
import "my-module";
Importing defaults
It is possible to have default export (whether it is an object, a function, a class, etc.). Reciprocally, it is possible to use the import
instruction to import such defaults.
The simplest version directly imports the default:
import myDefault from "my-module";
It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:
import myDefault, * as myModule from "my-module"; // myModule used as a namespace
or
import myDefault, {foo, bar} from "my-module"; // specific, named imports
Examples
Importing a secondary file to assist in processing an AJAX JSON request.
// --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); });
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Imports' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Imports' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | No support[2] | No support[1] | No support | Build 14342 | No support | No support |
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 | No support | No support | 36.0 |
[1] See bug 568953.
[2] See Chromium bug 1569
See also
export
- Previewing ES6 Modules and more from ES2015, ES2016 and beyond
- ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
- Axel Rauschmayer's book: "Exploring JS: Modules"
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/import