Import maps

Import maps allows control over what URLs get fetched by JavaScript import statements and import() expressions.

Web developers with experience with pre-ES2015 module systems, such as CommonJS, or web developers using popular tools like Webpack and TypeScript, are used to being able to import JavaScript modules by "bare specifier" names, such as import $ from "jquery" or import { pluck } from "lodash". This system allows easy coordination across the ecosystem: anyone can write a module and include an import statement using a package's well-known name, and let the Node.js runtime, or their build tooling, take care of translating this into an actual file on disk (including figuring out versioning considerations). Until import maps, the web has had no native ability to do this kind of mapping (although the specification has included a carveout for it since modules were first introduced). Import maps bring this ability to the web's native module system, putting it on parity with web developer expectations. Additionally, due to the general nature of how import maps decouple import specifiers from URLs, they allow better caching properties for module script graphs. This use of import maps goes beyond improving the developer experience, to give user-facing performance benefits.

Documentation

Specification

Editor's draft

Status in Chromium

Blink>HTML>Script


Origin trial (tracking bug) in:

  • Chrome for desktop release 74
  • Chrome for Android release 74
  • Android WebView release 74

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No public signals
  • No public signals
  • No public signals
  • Strongly positive

Owners

Last updated on 2020-06-25