A Clear Definition of npm and What it Does

There are many modern front-end development tools, and beginners are often confused. Many concepts seem single, but are actually composed of multiple interrelated parts, which is true of npm and its ecosystem.

For example, the term "Internet" seems simple, but it contains many components such as protocols, DNS, servers, browsers, networks, requests and responses, as well as other technologies accumulated over the years of iteration. The browser itself is also a complex system composed of multiple parts.

Guide Chapter

1. Who is this guide for?
2. What exactly does "npm" mean? (Current chapter)
3. What is the command line?
4. What is Node.js?
5. What is a package manager?
6. How to install npm?
7. How to install npm package?
8. What is the npm command?
9. How to install an existing npm project?

npm is a collection of technologies

Similarly, what we commonly call "npm" (all lowercase) and "front-end backend" are actually a collection of many different technologies and systems, like a complex Rub Goldberg mechanic used to generate browser-friendly code.

The command line mentioned earlier is the main way we interact with the npm ecosystem, which will be described in detail in the next chapter.

npm itself belongs to the category of "package management" software, and we will also explain this. In fact, in this guide, I might often refer to npm as a package manager.

Finally, Node.js itself, which is difficult to explain in a concise way, and I often summarize it in Douglas Adams's words: it is an almost-but not exactly-like-like programming language similar to JavaScript.

npm project management tool

More complexity is that many projects that enter npm install on the command line may have various tools pre-installed to perform various tasks in the project, such as processing code (for example, converting Sass code to CSS). Many one-stop preconfigured projects are available for direct installation (such as Create React App, Next.js, Nuxt.js, and SvelteKit). This is convenient, but it also adds complexity – meaning we need to add more names to the list of "front-end back-end" things.

This listing usually includes Babel (for compiling JavaScript), Sass (for compiling CSS), Webpack (for resource bundling), Vite (for developing servers and other tools), PostCSS (for converting one syntax to another), Autoprefixer (can be used as a PostCSS plug-in for CSS vendor prefixes), TypeScript (for additional JavaScript syntax), ESLint (for checking code quality), Prettier (for formatting code), and test libraries such as Jest or Cypress.

All of these (and more) tools fall into a broad category, which are often provided with npm-installed projects—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 handle code better, mentioning them here is just to illustrate the difference in order to understand where the boundaries lie in this huge and emerging world.

By the way, if you don't know what most (or any) tools mentioned above are, that's OK. Maybe you haven't encountered them yet, or you have installed them in your project without knowing their name. Either way, all of this is just to provide additional context.

Let's come to an end

If you feel a little overwhelmed at this moment, don't worry. The key point I hope you can remember after reading this chapter is that what we think of as "npm" (or more casually, "all those command line, backend stuff") is not a single thing, but a set of components that work together to make development easier for us.

Yes: While all this complexity may seem daunting at first, it does make things better. I promise.

While the front-end seems to be developing very rapidly, you are not left behind . You may just need to do some continuous learning to catch up.

← Chapter 1 Chapter 3 →

The above is the detailed content of A Clear Definition of npm and What it Does. For more information, please follow other related articles on the PHP Chinese website!