Dependency Management with NPM

In this session, we will use npm to extend our projects by installing software dependencies.

Housekeeping


Javascript Review

Git any questions about any Javascript you’ve covered so far?

  • Scopes and Closures
  • Forms and Form Events
  • Callback Functions
  • More DOM Manipulation with more focus on the three above

Hello npm

Materials


npm Basics

Slides: npm Package Manager

Materials

Activity


Introduction to DayJS

Materials


Creating a Project with Vite

Materials


Today's Achievement

npm Package Treasure Hunt

In groups of 3 or 4:

  1. Search for a useful npm package that:
    • can be used as an ES module;
    • is useable on the frontend in a Vanilla Vite project
  2. Find the installation instructions for your package that:
    • extends the documentation provided in the npm Registry;
    • shows a usage example that can work with a Vanilla Vite project.

Submission Instructions

EACH group member should submit the following links as their own Achievement in Brightspace:

  • the package listed in the npm Registry
  • the Git Repository on GitHub (or other Git host, if applicable)
  • the installation instructions that extend the Registry documentation
  • the usage instructions if it is different than the installation instructions

Include a list of your group members with your submission.

Constraints

Marks will be deducted if the following constraints are not fulfilled:

  • Each group should submit a different package than the other groups
  • Your chosen package should be installable as an ES Module (uses import syntax)
  • Your chosen package should be useable in a Vanilla Vite project

Lesson Prep

npm

Libraries and Tools