Import maps for cleaner imports in Deno - Step-by-Step Execution

Concept Flow - Import maps for cleaner imports

Start: Write import map JSON

↓

Reference import map in Deno run

↓

Deno reads import map

↓

Resolve import paths using map

↓

Run code with cleaner imports

↓

End

This flow shows how Deno uses an import map file to replace long URLs with short names during code execution.

Execution Sample

Deno

import { serve } from "http/server.ts";

serve(() => new Response("Hello"));

This code imports 'serve' from a short path defined in the import map instead of a full URL.

Execution Table

Step	Action	Input	Result	Notes
1	Load import map file	{"imports":{"http/server.ts":"https://deno.land/std@0.203.0/http/server.ts"}}	Import map loaded	Deno reads import map JSON
2	Parse import statement	import { serve } from "http/server.ts";	Identify 'http/server.ts' as module specifier	Prepare to resolve specifier
3	Resolve specifier using map	"http/server.ts"	"https://deno.land/std@0.203.0/http/server.ts"	Specifier replaced by full URL
4	Fetch module	"https://deno.land/std@0.203.0/http/server.ts"	Module code loaded	Deno downloads or caches module
5	Execute code	serve function called	Server starts and responds with 'Hello'	Program runs with cleaner import syntax
6	Exit	Program ends or runs indefinitely	No errors	Import map successfully used

💡 Program runs using resolved full URLs from import map, enabling short import paths.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
importSpecifier		"http/server.ts"	"https://deno.land/std@0.203.0/http/server.ts"	"https://deno.land/std@0.203.0/http/server.ts"
importMap	{}	{"imports":{"http/server.ts":"https://deno.land/std@0.203.0/http/server.ts"}}	{"imports":{"http/server.ts":"https://deno.land/std@0.203.0/http/server.ts"}}	{"imports":{"http/server.ts":"https://deno.land/std@0.203.0/http/server.ts"}}

Key Moments - 2 Insights

Why does the import statement use "http/server.ts" instead of the full URL?

Because the import map (see execution_table step 3) replaces the short specifier with the full URL, making imports cleaner and easier to read.

What happens if the import map does not include the specifier?

Deno will try to load the specifier as-is (a relative or absolute path). The import map only replaces specifiers it knows (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the resolved URL for the specifier "http/server.ts"?

A "https://deno.land/std@0.203.0/http/server.ts"

B "http/server.ts"

C "https://example.com/server.ts"

D "./server.ts"

💡 Hint

Check execution_table row 3 where the specifier is resolved.

At which step does Deno fetch the actual module code from the internet?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step labeled 'Fetch module' in the execution_table.

If the import map JSON is empty, what will happen when importing "http/server.ts"?

A Deno will resolve it to the full URL anyway.

B Deno will throw an error immediately.

C Deno will try to load "http/server.ts" as a relative path.

D Deno will ignore the import statement.

💡 Hint

Refer to key_moments about what happens if the specifier is not in the import map.

Concept Snapshot

Import maps let you write short import paths.
Deno reads a JSON map to replace these with full URLs.
Use --import-map flag to specify the map file.
This keeps code clean and easier to maintain.
If no map entry, Deno loads specifier as-is.

Full Transcript

Import maps in Deno allow you to write shorter, cleaner import statements by mapping short names to full URLs. The process starts by writing a JSON import map file that defines these mappings. When running your Deno program with the --import-map flag, Deno loads this map and uses it to replace import specifiers in your code. For example, "http/server.ts" can be mapped to "https://deno.land/std@0.203.0/http/server.ts". During execution, Deno reads the import map, resolves the short specifier to the full URL, fetches the module code, and runs your program. This makes your imports easier to read and maintain. If a specifier is not found in the import map, Deno tries to load it as a relative or absolute path. This visual trace shows each step from loading the map to running the code, tracking how variables like the import specifier change. Understanding this flow helps avoid confusion about how Deno resolves modules with import maps.

Practice

1. What is the main purpose of using import maps in Deno?

easy

A. To automatically update all dependencies to their latest versions

B. To speed up the execution of Deno scripts

C. To compile TypeScript files into JavaScript

D. To replace long URLs with short, easy-to-read names in imports

Solution

1. Step 1: Understand what import maps do

   Import maps allow you to map long URLs to short names, making imports cleaner.

2. Step 2: Identify the main benefit

   This makes code easier to read and maintain by avoiding long URLs in import statements.

3. Final Answer:

   To replace long URLs with short, easy-to-read names in imports -> Option D

4. Quick Check:

   Import maps = cleaner imports [OK]

Hint: Import maps shorten URLs to simple names [OK]

Common Mistakes:

• Thinking import maps speed up code execution
• Confusing import maps with dependency updates
• Believing import maps compile code

2. Which command correctly runs a Deno script using an import map file named imports.json?

easy

A. deno run --importmap imports.json script.ts

B. deno run --import-map=imports.json script.ts

C. deno run --map-import=imports.json script.ts

D. deno run -importmap imports.json script.ts

Solution

1. Step 1: Recall the correct flag syntax

   The correct flag to specify an import map file is --import-map=.

2. Step 2: Match the command with correct syntax

   deno run --import-map=imports.json script.ts uses --import-map=imports.json, which is the correct form.

3. Final Answer:

   deno run --import-map=imports.json script.ts -> Option B

4. Quick Check:

   Use --import-map=filename [OK]

Hint: Use double dash and equal sign for import map flag [OK]

Common Mistakes:

• Using single dash instead of double dash
• Missing equal sign between flag and filename
• Using incorrect flag names like --map-import

3. Given this imports.json file:

{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
  }
}

And this code:

import _ from "lodash";
console.log(typeof _);

What will be printed when running with --import-map=imports.json?

medium

A. "object"

B. "undefined"

C. SyntaxError

D. "function"

Solution

1. Step 1: Understand import map effect

   The import map maps "lodash" to the URL, so the import fetches lodash library.

2. Step 2: Check lodash type

   Lodash is an object with many functions, so typeof _ returns "object".

3. Final Answer:

   "object" -> Option A

4. Quick Check:

   Import maps load modules correctly = "object" [OK]

Hint: Mapped imports load modules, typeof lodash is object [OK]

Common Mistakes:

• Expecting 'undefined' because of missing URL
• Thinking import maps cause syntax errors
• Assuming lodash is a function type

4. You wrote this import map file imports.json:

{
  "imports": {
    "react": "https://cdn.skypack.dev/react"
  }
}

But running deno run --import-map=imports.json app.ts gives an error: Cannot resolve module "react". What is the likely cause?

medium

A. The import map file is not valid JSON

B. The import map file is not passed correctly to the command

C. The import statement in app.ts uses a different name than "react"

D. Deno does not support import maps

Solution

1. Step 1: Check import map correctness

   The JSON looks valid and the flag is used correctly, so those are unlikely causes.

2. Step 2: Check import statement in app.ts

   If the import statement uses a different name than "react", Deno won't find it in the map and errors.

3. Final Answer:

   The import statement in app.ts uses a different name than "react" -> Option C

4. Quick Check:

   Import name must match map key [OK]

Hint: Import name must exactly match import map key [OK]

Common Mistakes:

• Assuming import map file is invalid without checking
• Forgetting to pass import map flag
• Believing Deno lacks import map support

5. You want to use two libraries, lodash and dayjs, with import maps to keep your code clean. Your imports.json is:

{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash",
    "dayjs": "https://cdn.skypack.dev/dayjs"
  }
}

In your code, you write:

import _ from "lodash";
import dayjs from "dayjs";
console.log(dayjs().format());

What must you do to run this code correctly in Deno?

hard

A. Run with deno run --import-map=imports.json script.ts and ensure internet access

B. Run with deno run script.ts only, import maps are automatic

C. Include both libraries locally and import from relative paths

D. Use --allow-net flag without import maps

Solution

1. Step 1: Recognize import map usage

   To use import maps, you must run Deno with the --import-map flag pointing to your map file.

2. Step 2: Understand network requirement

   Since the URLs are remote, Deno needs internet access to fetch them, so network permission is needed.

3. Final Answer:

   Run with deno run --import-map=imports.json script.ts and ensure internet access -> Option A

4. Quick Check:

   Use --import-map and allow network [OK]

Hint: Always use --import-map flag and allow network for remote URLs [OK]

Common Mistakes:

• Running without --import-map flag
• Assuming import maps work automatically
• Not allowing network access for remote imports