Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Hello everyone, MY name is Xiaobai. This article continues to output the third question in the series of front-end confusion points. Devote oneself to tamp solid foundation, eliminate fuzzy knowledge point.

Past confusion knowledge Portal:

  • Module. Exports, exports, export are all exports, what is the difference?
  • Q: In 2022, do you know mandatory cache and negotiated cache?

The main points of this paper are as follows:

  1. A diagram of the history of package managers.
  2. npmWhat is it? How do you go from being criticized to being the master?
  3. npxWhat is it? What problem does it solve
  4. cnpmWhat is it? What problem does it solve
  5. yarnWhat is it, its advantage
  6. pnpmWhat is it, its advantage

Over the years of front-end development, I’ve found package management tools to be quite bulky. When I just learned the front end for a rookie, NPM to learn NPM install is not easy, and then what CNPM, YARN. For 15 years, I only know how to write HTML +jquery, so I don’t care about it. With the rise of Node and front-end frameworks like Vue, React, Angular, and WebPack, package manager has become a must-have skill for every front-end programmer.

So why do these companies and teams put so much effort into developing yarn, CNPM, PNPM and other new package managers? In fact, in the process of everyone’s development, there will be slow downloads of packages, different dependencies lead to various bugs and so on. In fact, these tools are to solve these problems.

Before we differentiate between these tools/downloaders, take a look at a time map to understand when each tool was created.

Time progression diagram

It can be clearly seen in the picture:

  • In 2010,npmFirst edition
  • It has been four years since 2014cnpmThe birth of
  • In 2015,npmVersion v3 has fixed the nesting directory problem in version V2 and will rely on flattening
  • In fact, 2016pnpmIt’s already there, but it’s not fully functional, it’s not well known
  • In 2016,npm@4andyarnReleased in the same year in the same monthyarnIt was a hit, it was popular,yarnAll indicators far exceednpm@4
  • Six months later, in May 2017npm@5Version released, all functions improved. It’s like a reference waveyarnThe gap is narrowing.
  • In July 2017[email protected]Release,npxThe birth of the command
  • In May 2018npm@6Release, performance improvement,npm init <pkg>The command

What is NPM, and how does it go from being criticized to being a master

I don’t need to talk too much about this, you’re very familiar with it. It’s basically an open source, free package manager. Easy for us to download and share resources.

Tools such as CNPM, YARN, and PNPM are all based on some variations of NPM package manager. Some disadvantages of early NPM were addressed, such as slow download speed and inability to download offline.

NPX is a command from [email protected]. We’ll talk about that separately in the next section

Major NPM release updates:

  1. [email protected] first published -2010
  2. [email protected] node_modules flattened directory structure – June 2015
  3. [email protected] package-lock.json predecessor nPm-shrinkwrap. Json for dependency locking — October 2016
  4. [email protected] package-lock.json generated by default, compatible with NPm-shrinkwrap. Json, refactoring NPm-cache, greatly improved download speed — May 2017
  5. [email protected] NPX command issued — July 2017
  6. [email protected] Added NPM init — May 2018

What is NPX, and what problem does it solve

NPX is a new command in NPM 5.2. If NPM is not in V5.2, please run NPM install -g NPX

You can run local modules

For example, in the VUE project, if you want to run the local vue-cli-service serve command directly on the command line, an error message is displayed: The command cannot be found

So we usually go like this:

Package. The json:

/ /... Other configuration
"scripts": {
    "dev": "vue-cli-service serve",},/ /... Other configuration
Copy the code

And then:

npm run dev
Copy the code

Now, however, with NPX you can do this:

npx cli-service serve 
Copy the code

Running successfully:

NPX is easy to use once discarded situations, not global installation

For example, create-react-app used to have global packages installed. However, after using it once, it is hardly used, which is a waste of disk space. Now we can use NPX create-react-app myapp and delete it as soon as we use it.

If you run this command for the first time, NPX will download create-react-app and store it in a temporary file, which will be automatically cleared after a period of time. Note that it will not be cleared immediately.

There are other useful features as well

NPX can download the specified version, you can specify the node version to run, etc. Please refer to ruan Yifeng NPX introduction, comprehensive understanding

NPM init is similar to NPX

In npm@6, a new command NPM init < PKG > was added.

These two commands are equivalent:

npm init react-app myapp
Copy the code
npx create-react-app myapp
Copy the code

NPM init < PKG > specifies a special command for scaffolding that starts with create, such as create-react-app and create-esm. NPM init installs PKG packages with create prefix by default, and does not install them globally like NPX, but runs them once and deletes them later.

NPM init < PKG > does not completely replace NPX, such as NPM init.

You can see it on the wayhttp-serverIs transformed intocreate-http-server, so the module cannot be found, recommendednpxGood. At least it’s more controlled.

What is YARN, and what problem does it solve

Yarn is also a package manager. It is similar to NPM in that it manages and installs packages. However, it solves some of the problems of earlier NPM, such as not supporting offline mode, tree structure dependency, dependency installation uncertainty, etc. Why early? Because the new version of NPM has basically solved its old problems, the two are not so different as expected.

From the latest versions of NPM and YARN, there is not much difference between their installation speed and usage experience. Yarn is slightly better.

Installation:

npm install -g yarn
Copy the code

The installation package:

yarn add [package]
Copy the code

Delete the package:

yarn remove [package]
Copy the code

Yarn is equivalent tonpmStrengths (early) :

Here are some of the early YARN advantages over NPM:

  1. Support offline installation (npm@5Have support)
  2. Depend on flat structure (npm@3Have support)
  3. Dependent installation determinismyarn.lock(npm@5 has increasedpackage-lock.json)
  4. Fast installation speed parallel download
  5. If the installation fails, retry automatically
  6. And so on…

What is PNPM, and what problems does it solve

PNPM is also a package manager. It skillfully uses the soft connection mode similar to Linux to enable multiple files to be used in one module. It solves the problem that yarn and NPM download duplicate files when installing the same dependency in multiple projects, avoiding disk waste and greatly increasing the download speed.

Here are some features of PNPM:

  1. pnpmIt runs very fast. It’s overnpmandyarn.
  2. pnpmA clever approach is taken to avoid copying all locally cached source files using hard and symbolic links. This means that multiple items of the same dependency will only be installed in one place once, connected directly to use, saving installation time and porcelain plate space.
  3. pnpminheritedyarnAnd the newnpmAll the benefits, including offline mode and deterministic installation.
  4. However, links can have compatibility problems in some scenarios, such asElectronApplication unavailablepnpm, deployed inlambdaThe application is not availablepnpm

conclusion

  1. npmIs a package manager for developers to share and download open source packages. Having undergone many major version updates, all aspects have been andyarN is at the same level.
  2. npxis[email protected]Easy to run local commands
  3. cnpmIt is a downloader for Chinese developers to download dependent packages.
  4. yarnTo solve thenpm@5Some of the previous complaints have other advantages as well. Such as offline installation, automatic retry installation, and parallel download.
  5. pnpmBy means of connection, multiple project dependencies are common to the same package, greatly saving disk space thanyarnandnpmThe download speed is much faster, but there are all sorts of compatibility issues with connectivity.

From an individual point of view, NPM, YARN, PNPM are all fine, but it is best if teams all use the same manager.

The above.

Ken, please don’t forget to give me a thumbs-up, comments, favorites.

Past wonderful

Module. Exports, exports, and exports are all exports. What’s the difference?

Q: In 2022, do you know about mandatory caching and negotiated caching?