A Clear Definition of npm and What it Does | CSS-Tricks

One of the things that makes this new, tool-filled era of front-end development difficult to understand at first is that we often communicate Things that are singularly named, tend to actually be made up of several different interconnected pieces. The same is true for npm and the surrounding ecosystem.

For example: Think of the way we casually refer to the “Internet”, even though the web itself is not one unified thing, but rather a collection of protocols, DNS, servers, browsers, networks, requests, responses, plus a lot of things grouped on Over the years of repetition. In this regard, even the browser itself is a single device with many parts.

Guide chapters

  1. Who is this guide for?
  2. What the heck does “npm” mean? (you are here!)
  3. What the heck is the command line?
  4. What the heck is a knot?
  5. What the heck is a package manager?
  6. How the heck do you install npm?
  7. How do you install npm packages?
  8. What the heck are npm commands?
  9. How the heck do you install an existing npm project?

npm is a collection of technologies

In the same way, what we generally think of as “npm” (yes, it’s all lowercase) and “back-of-the-front-end” in particular is one name for a group of many different individual technologies and systems; Kind of a Rube Goldberg machine for creating browser-friendly code.

You already mentioned the command line; That’s a big part of the ecosystem because it’s how we interact with it. But more on that in the next chapter.

Then there’s npm , which falls into a category known as “package management” software. We’ll cover that too. In fact, you’ll probably see me refer to npm as a package manager throughout this guide.

Finally, there’s Node itself, which is hard to explain succinctly, as I often describe it as a Douglas Adams paraphrase: it’s a programming language almost – but not quite – similar to JavaScript.

npm manages project tools

To further muddy the water, there are many projects you write about npm install On the command line, you may come with tools pre-installed to help you do a variety of things in your project, such as code manipulation (for example, converting Sass code to CSS). There are many pre-configured, integrated projects waiting for you to install and get started (React build, Next, Nuxt, SvelteKit, to name a few). This is convenient when done well, of course, but it also increases complexity – which means many names we need to add to the list of things in the back of the front end.

This list often includes tools such as Babel (for compiling JavaScript), Sass (for compiling CSS), webpack (for compiling assets), Vite (for compiling development servers and other tools), and PostCSS (for compiling one syntax into another); Autoprefixer (which can be a PostCSS plugin for CSS vendor prefixes); TypeScript (for additional JavaScript syntax); ESlint (for code quality checking); Nicer (for code formatting), and testing libraries like Jest or Cypress.

The stark white interior of a multi-storey library building and bookcases filled with brightly colored books, showing how npm manages front-end development tools.
npm is like a library building with floors of organized book collections, making it easy to find and manage things. (Photo: Johannes Mändle on Unsplash)

All of these things (and more) fall into this broad general category of gadgets that often come up with npm projects that are installed – or can be installed and used via npm – but are not actually part of npm itself. They are just examples of modern tools that help us do nice things with our code, and I might mention them here only because it’s worth noting the distinction, to get a sense of where the limits lie in this big new world.

And by the way, if you don’t know what’s more (or WhichFrom those above tools, it’s OK. Maybe you haven’t come across them yet, or maybe you worked on a project that installed without them knowing the name. Either way, it’s all just extra context.

Let’s break here

If you’re already feeling a little tired at this point: Don’t sweat. The main thing I want you to get away with after reading this specific chapter is that what we think of as “npm” (or perhaps more casually like “all command line, background y stuff”) is not really one thing, but rather a set of things that They work together to facilitate our development.

And yes: while all that complexity may sound intimidating beforehand, it is Do It actually makes things better. I promise you.

While the front end sound to move very quickly, No, you are not left behind. You may have a little continuing education to catch up with.

Leave a Comment