Angular Icon Get 67% off the Angular Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Importing and using NPM packages in Deno

With deno continuing to grow in popularity, one of the most common questions/requests I see regarding deno is that there is an abundance of packages/frameworks/libs that have already been created for the nodejs runtime to solve common problems, is there a way to utilize these libs in deno. In this post you’ll learn how to use packages from npm with Deno!

The deno import pattern requires you to import ES Modules (ESM) with the included file extension, for example:

import { serve } from '[email protected]/http/server.ts';

Notice how the .ts TypeScript file extension is included in the import path, this server.ts file is an ESM.

Most NPM packages are not built and export in this way, yet, meaning they cannot be directly imported in deno.

In this blog, I am going to show you one way to handle this problem. We are going to import the momentjs lib as an ESM and utilize the lib to format a date and print it to the console.

Let’s talk Pika CDN.

To achieve this, we are going to use this incredibly awesome CDN called Pika is on a mission to make the web faster. That is a direct quote from their website:

We’re on a mission to make the web 90% faster

Pika hosts web-focused ESM packages in their CDN which is fantastic for us to use with deno as this means we can import npm packages that we already know and use in our deno runtime from Pika as an ESM.

This is incredible.

And, it even comes with TypeScript typings and support as pika hosts type definitions (think like install a @types/ package from definitely typed) for every package where type definitions are provided to them. It handles this through the X-TypeScript-Types header on the import so deno knows where to get to get the type definitions for the given package.

Using an NPM Package in deno

Lets use the Pika CDN to build a super simple deno runtime app that will format and do some simple date manipulation.

To start, lets import momentjs from Pika:

import moment from '[email protected]^2.26.0';

Then, initialize a date object:

const today = new Date();

console.log('today is ', today.toDateString()); // Tue Jun 09 2020

Now lets use the imported momentjs lib to format the date/time into a string with this format: MM/DD/YYYY hh:mm a

// initialise a moment instance from our date instance
const todayMoment = moment(today);
// format the moment instance with our given format string
const todayFormatted = todayMoment.format('MM/DD/YYYY hh:mm a');

console.log('today, but formatted, is ', todayFormatted); // 06/09/2020 08:47 pm

Look at that! We can now use the momentjs package in our deno app. Super easy. This was a great collaboration between the deno and pika CDN team to make this work.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

Let’s manipulate our today instance even more and use some more momentjs functionality:

// add a day to the date to get to tomorrow.
const tomorrow = todayMoment.add(1, 'd');

console.log('tomorrow is ', tomorrow.format('YYYY-MM-DD')); // 2020-06-10

// get the first day of the current month from today
const firstDayOfMonth = todayMoment.startOf('month');

console.log('the first day of the current month is ', firstDayOfMonth.format('YYYY-MM-DD')); //2020-06-01

// get the last day of the current month from today
const lastDayOfMonth = todayMoment.endOf('month');

console.log('the last day of the current month is ', lastDayOfMonth.format('YYYY-MM-DD')); //2020-06-30

And that’s it! Now you’ve learned how to use an NPM package with deno, the world is your oyster.

🏆 Want to learn more JavaScript? Check out our JavaScript courses to fully learn the deep language basics, advanced patterns, functional and object-oriented programming paradigms and everything related to the DOM. A must-have series of courses for every serious JavaScript developer.

Thanks for reading, I hope you enjoyed the Deno article! Follow me on Twitter and let me know how you enjoyed the post.