静态
import
statement is used to import read only live bindings which are
exported
by another module.
Imported modules are in
strict mode
whether you declare them as such or not. The
import
statement cannot be used in embedded scripts unless such script has a
type="module"
. Bindings imported are called live bindings because they are updated by the module that exported the binding.
There is also a function-like dynamic
import()
, which does not require scripts of
type="module"
.
Backward compatibility can be ensured using attribute
nomodule
on the
<script>
tag.
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
defaultExport
Name that will refer to the default export from the module.
module-name
.js
file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed.
name
Name of the module object that will be used as a kind of namespace when referring to the imports.
exportN
Name of the exports to be imported.
aliasN
Names that will refer to the named imports.
name
parameter is the name of the "module object" which will be used as a kind of namespace to refer to the exports. The
export
parameters specify individual named exports, while the
import * as name
syntax imports all of them. Below are examples to clarify the syntax.
This inserts
myModule
into the current scope, containing all the exports from the module in the file located in
/modules/my-module.js
.
import * as myModule from '/modules/my-module.js';
Here, accessing the exports means using the module name ("myModule" in this case) as a namespace. For example, if the module imported above includes an export
doAllTheAmazingThings()
, you would call it like this:
myModule.doAllTheAmazingThings();
Given an object or value named
myExport
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
myExport
into the current scope.
import {myExport} from '/modules/my-module.js';
This inserts both
foo
and
bar
into the current scope.
import {foo, bar} from '/modules/my-module.js';
You can rename an export when importing it. For example, this inserts
shortName
into the current scope.
import {reallyReallyLongModuleExportName as shortName}
from '/modules/my-module.js';
Import multiple exports from a module with convenient aliases.
import {
reallyReallyLongModuleExportName as shortName,
anotherLongModuleName as short
} from '/modules/my-module.js';
Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.
import '/modules/my-module.js';
This works with 动态导入 as well:
(async () => {
if (somethingIsTrue) {
// import module for side effects
await import('/modules/my-module.js');
}
})();
If your project uses packages that export ESM, you can also import them for side effects only. This will run the code in the package entry point file (and any files it imports) only.
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
When importing a default export with 动态导入 , it works a bit differently. You need to destructure and rename the "default" key from the returned object.
(async () => {
if (somethingIsTrue) {
const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
}
})();
The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on demand, you can use a dynamic import instead. The following are some reasons why you might need to use dynamic import:
Use dynamic import only when necessary. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking .
To dynamically import a module, the
import
keyword may be called as a function. When used this way, it returns a promise.
import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});
This form also supports the
await
关键词。
let module = await import('/modules/my-module.js');
The code below shows how to import from a secondary module to assist in processing an AJAX JSON request.
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)));
}
import { getUsefulContents } from '/modules/file.js';
getUsefulContents('http://www.example.com',
data => { doSomethingUseful(data); });
This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The
import()
function also supports
await
.
const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
link.addEventListener("click", e => {
e.preventDefault();
import('/modules/my-module.js')
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
});
}
| 规范 |
|---|
|
ECMAScript (ECMA-262)
The definition of 'Imports' in that specification. |
|
ECMAScript (ECMA-262)
The definition of 'Import Calls' in that specification. |
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
import
|
Chrome 61 |
Edge
16
|
Firefox
60
|
IE No | Opera 48 | Safari 10.1 | WebView Android 61 | Chrome Android 61 |
Firefox Android
60
|
Opera Android 45 | Safari iOS 10.3 | Samsung Internet Android 8.0 |
nodejs
13.2.0
|
| Dynamic import | Chrome 63 | Edge 79 |
Firefox
67
|
IE No | Opera 50 | Safari 11.1 | WebView Android 63 | Chrome Android 63 |
Firefox Android
67
|
Opera Android 46 | Safari iOS 11.3 | Samsung Internet Android 8.0 |
nodejs
13.2.0
|
| Available in workers |
Chrome
80
|
Edge
80
|
Firefox No | IE No | Opera No | Safari No | WebView Android 80 |
Chrome Android
80
|
Firefox Android No | Opera Android No | Safari iOS No | Samsung Internet Android No | nodejs No |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in Test262 , the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.
export
import.meta