Remapping JavaScript module names with import maps

You cannot do without import maps if during development you do not want to lose time on bundling.

Problems with URLs as module specifiers

import statement imports live bindings from the module indicated with a module specifier:

import defaultExport from 'moduleSpecifier';

When browsers started to support ES modules, only valid URLs were accepted as module specifiers. Recently implemented import maps extended the choice of specifiers. To appreciate how import maps facilitate JavaScript development, let’s first review the limitations and advantages of URLs in the role of module specifiers. To demonstrate the properties of URLs, I will use Visual Studio Code, a code editor popular among web developers.

The sample code for this post section is saved in a dedicated subfolder moduleSpecifiers. The code is supposed be executed in a browser.

If index.html is served by Live server extension of VSCode, the browser loads it from http://127.0.0.1:5500/moduleSpecifiers/index.html. Note, the start page URL includes the folder name appended to the host…