Importing from npm packages in Deno - Step-by-Step Execution

Concept Flow - Importing from npm packages

Start: Write import statement

↓

Deno reads import URL

↓

Deno fetches package from npm registry

↓

Deno caches package locally

↓

Package code is loaded

↓

Imported symbols available in code

↓

Use imported package in your code

↓

End

Deno reads the import URL, fetches the npm package, caches it, and makes the package available for use in your code.

Execution Sample

Deno

import { serve } from "npm:@denojs/serve";

serve(() => new Response("Hello from Deno!"));

This code imports the 'serve' function from an npm package and uses it to start a simple HTTP server.

Execution Table

Step	Action	Evaluation	Result
1	Read import statement	import { serve } from "npm:@denojs/serve";	Recognizes npm package import
2	Fetch package	Fetch 'npm:@denojs/serve' from npm registry	Package downloaded and cached
3	Load package	Load 'serve' function from package	'serve' function available
4	Call serve()	serve(() => new Response("Hello from Deno!"))	HTTP server starts
5	Server running	Server listens for requests	Responds with 'Hello from Deno!'
6	Exit	No errors, server runs indefinitely	Execution continues until stopped

💡 Execution continues as server runs; no exit unless stopped manually

Variable Tracker

Variable	Start	After import	After serve call	Final
serve	undefined	function	function	function (server running)

Key Moments - 3 Insights

Why does Deno use a URL-like string starting with 'npm:' in the import?

Deno uses the 'npm:' prefix to know it should fetch the package from the npm registry, as shown in execution_table step 2.

What happens if the package is already cached locally?

Deno skips fetching and loads the package directly from cache, speeding up execution (related to step 2 and 3).

Can you import only specific functions from an npm package?

Yes, like in the example where only 'serve' is imported, shown in step 1 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the result after step 3?

A Server has started

B Package is still being fetched

C 'serve' function is available

D Import statement is ignored

💡 Hint

Check the 'Result' column in row for step 3 in execution_table

At which step does Deno cache the npm package locally?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table step 2

If you change the import to 'import * as serve from ...', how would the variable_tracker change after import?

A 'serve' would be an object containing all exports

B 'serve' would be undefined

C 'serve' would be a string

D 'serve' would be a number

💡 Hint

Consider how JavaScript imports with '*' syntax work, related to variable_tracker after import

Concept Snapshot

Deno imports npm packages using URLs starting with 'npm:'.
It fetches and caches packages automatically.
You can import specific functions or entire modules.
Use the imported symbols directly in your code.
Deno handles caching to speed up repeated runs.

Full Transcript

In Deno, you import npm packages by writing an import statement with a URL starting with 'npm:'. When the code runs, Deno reads this import and fetches the package from the npm registry. It caches the package locally so it doesn't need to download it again next time. Then, Deno loads the requested functions or objects from the package and makes them available in your code. You can then use these imported parts, like calling the 'serve' function to start a server. This process continues as long as your program runs or until you stop it.

Practice

1. In Deno, how do you import a package from npm?

easy

A. Use import pkg from "deno:package-name";

B. Use import pkg from "https://npmjs.com/package-name";

C. Use import pkg from "npm:package-name";

D. Use require("package-name")

Solution

1. Step 1: Understand Deno's npm import syntax

   Deno uses the prefix npm: to import packages from npm directly.

2. Step 2: Identify the correct import statement

   The correct syntax is import pkg from "npm:package-name"; which tells Deno to fetch from npm.

3. Final Answer:

   Use import pkg from "npm:package-name"; -> Option C

4. Quick Check:

   npm imports use "npm:" prefix [OK]

Hint: Remember npm imports start with "npm:" prefix [OK]

Common Mistakes:

• Using URL instead of npm prefix
• Using require() which is Node.js syntax
• Using wrong prefix like deno:

2. Which of the following is the correct syntax to import only the join function from the npm package path in Deno?

easy

A. import { join } from "npm:path";

B. import join from "npm:path/join";

C. import * as join from "npm:path";

D. import join from "path";

Solution

1. Step 1: Understand named imports from npm packages in Deno

   You can import specific functions using curly braces from the package name with npm prefix.

2. Step 2: Match correct syntax

   The correct syntax is import { join } from "npm:path"; to import only the join function.

3. Final Answer:

   import { join } from "npm:path"; -> Option A

4. Quick Check:

   Named imports use curly braces with npm prefix [OK]

Hint: Use curly braces to import specific parts from npm packages [OK]

Common Mistakes:

• Trying to import default when function is named export
• Using wrong path like "npm:path/join"
• Omitting npm prefix

3. What will be the output of this Deno code snippet?

import { v4 } from "npm:uuid";
console.log(typeof v4);

medium

A. "string"

B. "object"

C. "undefined"

D. "function"

Solution

1. Step 1: Understand what v4 from uuid is

   The v4 export from the uuid package is a function that generates UUID strings.

2. Step 2: Check the type of v4

   Using typeof v4 returns "function" because v4 is a function.

3. Final Answer:

   "function" -> Option D

4. Quick Check:

   uuid v4 is a function [OK]

Hint: Remember uuid v4 is a function generating IDs [OK]

Common Mistakes:

• Thinking v4 is a string UUID directly
• Confusing type with object or undefined
• Forgetting to import with npm prefix

4. You wrote this import in Deno:

import express from "npm:express";

But running the code gives an error: SyntaxError: The requested module does not provide an export named 'default'. What is the likely fix?

medium

A. Change import to import * as express from "npm:express";

B. Change import to import express from "express";

C. Add --allow-net flag when running Deno

D. Use require("express") instead

Solution

1. Step 1: Understand the error about missing default export

   The error means express does not have a default export, so import express from ... fails.

2. Step 2: Use namespace import to get all exports

   Using import * as express from "npm:express"; imports all exports as an object, fixing the error.

3. Final Answer:

   Change import to import * as express from "npm:express"; -> Option A

4. Quick Check:

   No default export means use * as import [OK]

Hint: If default export missing, try namespace import * as [OK]

Common Mistakes:

• Removing npm prefix
• Using require() which is not supported in Deno
• Ignoring error and expecting code to run

5. You want to import the lodash package from npm in Deno and use its chunk function to split an array into smaller arrays of size 2. Which code snippet correctly does this?

hard

A. import { chunk } from "npm:lodash";
console.log(chunk([1,2,3,4,5], 2));

B. import _ from "npm:lodash";
console.log(_.chunk([1,2,3,4,5], 2));

C. import chunk from "npm:lodash/chunk";
console.log(chunk([1,2,3,4,5], 2));

D. import { chunk } from "lodash";
console.log(chunk([1,2,3,4,5], 2));

Solution

1. Step 1: Understand lodash exports and npm import in Deno

   Lodash exports a default object with functions like chunk. To use chunk, import the default as _.

2. Step 2: Check import syntax with npm prefix

   Use import _ from "npm:lodash"; to import lodash default export, then call _.chunk(...).

3. Final Answer:

   import _ from "npm:lodash"; console.log(_.chunk([1,2,3,4,5], 2)); -> Option B

4. Quick Check:

   Lodash default import then call chunk method [OK]

Hint: Lodash exports default object; import default and call method [OK]

Common Mistakes:

• Trying named import for chunk which lodash does not export separately
• Omitting npm prefix
• Importing from plain "lodash" without npm prefix