Using npm packages in Deno - Mini Project: Build & Apply

Using npm packages in Deno

📖 Scenario: You want to use a popular npm package inside a Deno project to handle dates easily.Deno supports npm packages directly, so you will learn how to import and use one.

🎯 Goal: Build a simple Deno script that imports the date-fns npm package and uses it to format the current date.

📋 What You'll Learn

Create a variable to hold the current date using new Date()

Create a variable to hold the date format string 'yyyy-MM-dd'

Import the format function from the date-fns npm package

Use the format function to format the current date with the format string

💡 Why This Matters

🌍 Real World

Developers often want to use popular npm packages in Deno projects to reuse existing code and libraries.

💼 Career

Knowing how to import and use npm packages in Deno is useful for modern JavaScript/TypeScript development and increases your versatility as a developer.

1

Create a variable for the current date

Create a variable called currentDate and set it to new Date() to get the current date and time.

Deno

// Create a variable called currentDate and set it to new Date()
// Your code here

Hint

Use const currentDate = new Date() to get the current date and time.

2

Create a variable for the date format string

Create a variable called dateFormat and set it to the string 'yyyy-MM-dd' which will be used to format the date.

Deno

const currentDate = new Date()
// Create a variable called dateFormat and set it to 'yyyy-MM-dd'
// Your code here

Hint

Use const dateFormat = 'yyyy-MM-dd' to define the format string.

3

Import the format function from date-fns npm package

Import the format function from the npm package date-fns using the statement import { format } from "npm:date-fns"; at the top of your code.

Deno

// Import the format function from npm:date-fns
import { format } from "npm:date-fns";

const currentDate = new Date()
const dateFormat = 'yyyy-MM-dd'
// Your code here

Hint

Use import { format } from "npm:date-fns"; to import the function.

4

Format the current date using the format function

Create a variable called formattedDate and set it to the result of calling format(currentDate, dateFormat) to format the current date using the imported format function.

Deno

import { format } from "npm:date-fns";

const currentDate = new Date()
const dateFormat = 'yyyy-MM-dd'

// Create a variable called formattedDate and set it to format(currentDate, dateFormat)
// Your code here

Hint

Use const formattedDate = format(currentDate, dateFormat) to format the date.

Practice

1. What is the correct way to import an npm package named lodash in a Deno script?

easy

A. import _ from "npm:lodash";

B. import _ from "https://cdn.lodash.com/lodash.js";

C. import _ from "deno:lodash";

D. import _ from "node_modules/lodash";

Solution

1. Step 1: Understand Deno npm import syntax

   Deno uses the syntax import package from "npm:package-name" to import npm packages directly.

2. Step 2: Match the syntax to the lodash package

   Using import _ from "npm:lodash"; correctly imports lodash from npm in Deno.

3. Final Answer:

   import _ from "npm:lodash"; -> Option A

4. Quick Check:

   npm import syntax = import from "npm:package" [OK]

Hint: Use import from "npm:package-name" to add npm packages [OK]

Common Mistakes:

• Using URL imports instead of npm: prefix
• Trying to import from local node_modules folder
• Using incorrect prefix like deno: or https:

2. Which of the following is the correct syntax to import the axios package from npm in Deno?

easy

A. import axios from "npm:axios";

B. import axios from "npm axios";

C. import axios from "npm:/axios";

D. import axios from "npm::axios";

Solution

1. Step 1: Check correct npm import syntax

   The correct syntax uses a colon after npm, no spaces or extra characters: npm:package-name.

2. Step 2: Identify the valid option

   Only import axios from "npm:axios"; matches the correct syntax.

3. Final Answer:

   import axios from "npm:axios"; -> Option A

4. Quick Check:

   Correct npm import = "npm:package" [OK]

Hint: Remember no spaces or extra symbols in npm import path [OK]

Common Mistakes:

• Adding spaces between npm and package name
• Using slashes or double colons incorrectly
• Omitting the npm: prefix

3. Given this Deno code snippet, what will be the output?

import chalk from "npm:chalk";
console.log(chalk.green("Success!"));

medium

A. Runtime error: chalk is undefined.

B. A syntax error because chalk cannot be imported this way.

C. The text 'chalk.green("Success!")' printed literally.

D. The text 'Success!' printed in green color in the console.

Solution

1. Step 1: Understand chalk npm package usage

   Chalk colors console text. Importing via npm in Deno works if syntax is correct.

2. Step 2: Analyze the console.log statement

   Calling chalk.green("Success!") returns the string 'Success!' styled green in supported terminals.

3. Final Answer:

   The text 'Success!' printed in green color in the console. -> Option D

4. Quick Check:

   npm chalk import + chalk.green() = green text output [OK]

Hint: chalk colors text; npm import works if syntax is right [OK]

Common Mistakes:

• Assuming import fails without checking syntax
• Expecting literal string output instead of colored text
• Confusing runtime errors with import errors

4. What is wrong with this Deno code snippet?

import express from "npm:express";
const app = express();
app.listen(3000);
console.log("Server running on port 3000");

medium

A. The import statement syntax is incorrect.

B. Deno does not support importing express from npm.

C. Missing permission flag to allow network access.

D. express() is not a function in this context.

Solution

1. Step 1: Check import syntax and package support

   Importing express from npm is valid syntax in Deno 1.28+ and later.

2. Step 2: Identify runtime requirements

   Running a server requires network permissions. Without --allow-net, Deno blocks network calls causing failure.

3. Final Answer:

   Missing permission flag to allow network access. -> Option C

4. Quick Check:

   Network access needs --allow-net flag in Deno [OK]

Hint: Remember to add --allow-net for server network access [OK]

Common Mistakes:

• Assuming all npm packages work without permissions
• Confusing import syntax errors with permission errors
• Not running Deno with required flags

5. You want to use the npm package uuid in Deno to generate a version 4 UUID. Which code snippet correctly imports and uses it?

hard

A. import v4 from "npm:uuid";
console.log(v4());

B. import { v4 as uuidv4 } from "npm:uuid";
console.log(uuidv4());

C. import uuid from "npm:uuid";
console.log(uuid.v4());

D. import * as uuid from "npm:uuid";
console.log(uuid.v4);

Solution

1. Step 1: Understand uuid package export style

   The uuid package exports v4 as a named export, so it must be imported with curly braces or aliased.

2. Step 2: Check each import usage

   A: Default import fails--no default export in uuid.
   B: Correct named import with alias and proper call.
   C: Default import lacks v4 property.
   D: Namespace import ok, but missing () logs function, not UUID.

3. Final Answer:

   import { v4 as uuidv4 } from "npm:uuid"; console.log(uuidv4()); -> Option B

4. Quick Check:

   Named import with alias for v4 UUID = import { v4 as uuidv4 } from "npm:uuid"; console.log(uuidv4()); [OK]

Hint: Use named import with alias for uuid v4 function [OK]

Common Mistakes:

• Importing default when package exports named functions
• Calling v4 without importing it properly
• Omitting parentheses when calling uuid.v4