Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to Node.Js Index

npm
Node Package Manager
Intro

We saw with the node read/write conversation how to use native node modules in our code. With that example, we used the file system (fs) module to read and write data in a file. This module and many others are built in to node. Here is the complete list.

Now over time, some programmers have built Js node apps than can be beneficial to other programmers. They put all the necessary files into "packages" than can then be distributed online. In order to utilize these packages we need to use the npm (node package manager). So, npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub.

In order to utilize any of these packages, we need to find the package on the npm website, and install it into our node environment. The packages will have all the documentation needed to install and utilize their package. Just go to the npm website and find a package that meets your needs.

Installing a Package

When we find a package online that we want to install into our project, we must follow some basic steps. I'm going to list the steps here and we'll discuss each step in detail below.

All of the procedures will be ran from your Terminal application of choice. If you have Node installed on your system, you can also do this from a Terminal window, within VSCode. In VSCode, [ctrl/sh/`] to open the Terminal window.

So open a Terminal window, navigate to the working directory for your project, and:

    Steps to install an npm package

    • - npm init
    • - install your node package

  1. npm init: initializes npm and creates a package.json file which is our configuration file for our project. It will ask you a series of questions that you answer to set up this file.
    • - Package Name: give your project a name.
    • - Version Number: press ENTER to accept default.
    • - Description: brief description of your project.
    • - Entry Point: your main Js file for your project, usually index.js.
    • - Test Command: optional.
    • - GIT Repository: optional.
    • - Keywords: optional.
    • - Author: enter author name. (manually edit the package.json file after, to add multiple authors)
    • - Licenser: press ENTER to accept default.
    • - type: press ENTER to accept default.
    • - Is this OK?: press ENTER to accept configuration.
    • At this point npm is initialized, and your package.json file is created in your project folder, with all of the configuration settings.
  2. package install: at this point we can go to the npm Website, find the package we wish to utilize, and install it into our working environment.
    • - npm install packageName or npm i packageName
      • (you can install multiple packages a one time by placing a space between the package names. eg: npm i package1 package2 package3)
    • Once you press ENTER the package will download and install. It creates a node_modules directory that includes all the files for your packages. It also adds information about your packages in the package.json file, about your packages under dependencies.
    • So your package.json file, list's your main Js file that you specified when you ran your npm init, and now set's it as dependent on the package(s) you installed, which is listed in package.json under "dependencies".
    • Once you get the package(s) installed, you'll need to look at their website for instructions on how to implement the package. All packages come with documentation on their website.
node ECMAScript Update

After we install a package, we can follow the documentation to add the package to our JavaScript file. In some cases they call for you to require the package, and sometimes they might have you import the package. So what's the difference here?

Well, it essentially has to do with older and newer node versions. Node update to v.12 added "ESM" (echo script modules) support to standardize the way in which node imports packages. Before v.12, node used CJS (common Js). So this update provides a way to be consistent on both the front-end and the back-end.

CJS uses require to get our packages into our Js files, and ESM uses import. Let's say we have an older package and the documentation might show the following to "pull" their package into your JavaScript file.

  • let functionName = require('packageName');

Now this is fine and it will work, but what if you want to update your file to the new ESM standard?

First we have to update our package.json file. In this file we need to specify the "type" of standards that we want to use. We can either specify "commonjs" for the older CJS standard, or "module" for the newer ESM standard. So to change from older CJS to newer ESM we would add the following line to our package.json file:

  • "type": "module",

note*: it was suggested by an instructor to add this line after the line ["main": "index.js",] which is where we point our packages to our main Js file. This was added when we ran our npn init. Once we finish modifying package.json, all we have to do is change our require code to:

  • import functionName from "packageName";


Back to Top