Import maps for cleaner imports in Deno - Mini Project: Build & Apply

Import maps for cleaner imports

📖 Scenario: You are building a small Deno project that uses multiple external libraries. To keep your import statements clean and easy to manage, you want to use an import map.Import maps let you create short aliases for long URLs, so your code looks neat and is easier to update.

🎯 Goal: Create a Deno project that uses an import map to simplify imports of external modules. You will define the import map, configure Deno to use it, and write a simple script that imports and uses the aliased modules.

📋 What You'll Learn

Create an import map JSON file with aliases for two external modules

Configure Deno to use the import map when running the script

Write a Deno script that imports modules using the aliases from the import map

Use the imported modules in a simple way to demonstrate the imports work

💡 Why This Matters

🌍 Real World

Import maps help keep your code clean and manageable when using many external libraries, especially in Deno and browser projects.

💼 Career

Understanding import maps is useful for modern JavaScript and TypeScript development, improving code maintainability and simplifying dependency management.

1

Create the import map file

Create a file named import_map.json with an imports object that maps "lodash" to "https://cdn.skypack.dev/lodash" and "dayjs" to "https://cdn.skypack.dev/dayjs".

Deno

{
  "imports": {
    // Your code here
  }
}

Hint

Remember, the import map is a JSON file with an imports key that holds alias-to-URL mappings.

2

Write the Deno script with aliased imports

Create a file named app.ts and write import statements that import _ from "lodash" and dayjs from "dayjs". Then, write a line that uses _.capitalize to capitalize the string "deno" and store it in a variable capitalized. Also, create a variable today that stores the current date formatted as YYYY-MM-DD using dayjs().format.

Deno

import _ from "lodash";
import dayjs from "dayjs";

// Your code here

Hint

Use the aliases exactly as defined in the import map for your import statements.

3

Configure Deno to use the import map

Run the Deno script app.ts using the --import-map=import_map.json flag to enable the import map.

Deno

// Run the script with import map
// deno run --import-map=import_map.json app.ts

Hint

Use the --import-map flag exactly as shown when running your script.

4

Add console logs to show the results

Add two console.log statements to print the variables capitalized and today to the console.

Deno

console.log(capitalized);
console.log(today);
// Your code here

Hint

Use console.log to show the values of your variables.

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