Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
You can also read the article in English (US).

The import statement is used to import functions, objects, or primitives which are defined in and exported by an external module, script, or the like.

This feature is only just beginning to be implemented in browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel, Rollup, and Webpack.

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";
defaultMember
Name that will refer to the default export from the module.
module-name
The URL of the module to import; this should be a complete relative or absolute URL to the .js file containing the module, including the .js extension. Certain bundlers, along with Node.js, don't require the use of the extension, but the best practice is usually to use it unless you're certain you dont need it.
name
Name of the object that will refer to the imports.
member, memberN
Name of the exported members to be imported.
alias, aliasN
Names that will refer to the named imports.

Description

The name parameter is the name which will refer to the exported members. The member parameters specify individual members, while the name parameter imports all of them. 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 the module in the file located in /modules/my-module.js.

import * as myModule from '/modules/my-module.js';

Here, accessing the members means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes a member function doAllTheAmazingThings(), you would call it like this:

myModule.doAllTheAmazingThings();

Import a single member of a module

Given an object or value named myMember which has been exported from the module my-module either implicitly (because the entire module is exported) or explicitly (using the export statement), this inserts myMember into the current scope.

import {myMember} from '/modules/my-module.js';

Import multiple members of a module

This inserts both foo and bar into the current scope.

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

Import a member with a more convenient alias

You can rename a member when importing it. For example, this inserts shortName into the current scope.

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

Rename multiple members during import

Import multiple members of a module with convenient aliases.

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

Import a module for its side effects only

Import an entire module for side effects only, without importing any bindings. This runs the module's global code, but doesn't actually add any bindings to your project.

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

Importing defaults

It is possible to have a default export (whether it is an object, a function, a class, etc.). The  import statement may then be used to import such defaults.

The simplest version directly imports the default:

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

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 '/modules/my-module.js';
// myModule used as a namespace

or

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

Examples

Importing a secondary file to assist in processing an AJAX JSON request.

The module: 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)));
}

The main program: main.js

import { getUsefulContents } from '/modules/file.js';

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 Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 60 [2][5][7]
61 [6]
38 (14.14342) [3][5] 54 (54) [1][5] No support 47 [6] 10.1[4][5]
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 47[6] No support 60 [7]
61 [6]

[1] See bug 568953.

[2] See Chromium bug 1569

[3] Behind the "Enable experimental JavaScript features" flag(about:flags)

[4] See Safari Technical Preview 21 Release Notes

[5] See ECMAScript modules in browsers

[6] See Modules (ES6) - Chrome Platform Status

[7] Behind the enable Experimental Web Platform flag in chrome:flags

See also