What the Heck Does “npm” Mean?

One of the things that makes this new, tooling-heavy era of front-end development so seemingly hard to understand at first is that, while we often call things by a singular name, they tend to be actually comprised of several different interconnected pieces. The same is true for npm and the ecosystem around it.

For example: Think of how we casually refer to “the internet,” even though the web itself is not a single, unified thing, but a collection of protocols, DNS, servers, browsers, networks, requests and responses, plus lots of other things assembled over years of iterations. For that matter, even the browser itself is one machine with many parts.

Guide chapters

1. Who the Heck 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 Node?
5. What the Heck is a Package Manager?
6. How the Heck Do You Install npm?
7. How the Heck 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 that same way, what we generally think of as “npm” (yes, all lowercase) and “back-of-the-front-end” in particular is a single name for a collection of many different individual technologies and systems; a sort of Rube Goldberg machine to generate browser-friendly code.

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

And then there’s npm, which is in a category known as “package management” software. We’ll cover that as well. In fact, you’ll likely see me refer to npm as a package manager throughout this guide.

And finally, there’s Node itself, which is so tricky to explain succinctly I often describe it by paraphrasing Douglas Adams: it’s a programming language that’s almost—but not quite—entirely like JavaScript.

npm manages project tools

To further muddy the waters, many projects where you type npm install into the command line might come with pre-installed tools to help you do a wide variety of things in your project, like process your code (e.g., turn Sass code into CSS). There are many all-in-one, preconfigured projects out there just waiting for you to install them and get started (Create React App, Next, Nuxt, and SvelteKit, to name a few). This is convenient when done well, of course, but it’s also added complexity—meaning many more names we need to add to our list of back-of-the-front-end things.

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

npm is like a library building with floors of book collections that are organized, making things easier to find and manage. (Photo: Johannes Mändle on Unsplash)

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

And by the way, if you didn’t know what most (or any) of those tools mentioned above are, that’s ok. Maybe you haven’t come across them yet, or maybe you’ve worked on a project that had them installed without knowing them by name. Either way, all of this is merely for additional context.

Let’s break here

If you’re already feeling a bit overwhelmed at this point: don’t sweat it. The key thing I want you to walk away with after reading this specific chapter is that what we think of as “npm” (or maybe more casually as “all that command line, back-end-y stuff”) is not really one thing, but a collection of things that work together to make development easier for us.

And yes: while all that complication seems intimidating up-front, it does actually make things better. I promise.

While front-end seems to move very quickly, no, you have not been left behind. You may just have a bit of continuing education to get caught up on.

← Chapter 1

Chapter 3 →

---

What the Heck Does “npm” Mean? originally published on CSS-Tricks. You should get the newsletter and become a supporter.

source https://css-tricks.com/a-clear-definition-of-npm-and-what-it-does/