Take you through several front-end package managers (npm/pnpm, etc.)

npm

npm is the package manager that comes with it, usually throughnpm installCommands to install various npm packages (for example:npm install vue-router) is installed through this package manager. About the settings for the npm package download mirror source:

# View download sourcenpm config get registry

# Bind the download sourcenpm config set registry 

# Delete the download sourcenpm config rm registry

The version lock file of npm package is, If there is a need to manage a multi-person collaborative warehouse, you can add it to.gitignoreFiles are convenient for unified team package management.

cnpm

cnpm is a package management tool launched by Alibaba. This mirror source will be used by default after installation.

Its installation command is very consistent with npm,cnpm installCommands to install (e.g.cnpm install vue-router). Before using it, you need to install globally via the npm command:

npm install -g cnpm

# ornpm install -g cnpm --registry=

cnpm does not generate a version lock lock file, nor does it identify the lock file under the project. Therefore, it is recommended to use npm or other package management tools to manage project packages by binding the mirror source.

yarn

yarn is also a commonly used package management tool, very similar to npm. Packages on npmjs will also be synchronized to yarnpkg. It also requires a global installation to be used:

npm install -g yarn

But the installation command will be a little different, yarn is usedyarn addreplacenpm install,useyarn removereplacenpm uninstall,For example:

# Install a single packageyarn add vue-router

# Install global packageyarn global add typescript

# Uninstall the packageyarn remove vue-router

And when running the script, you can use it directlyyarnLet's replacenpm run,For exampleyarn devEquivalent tonpm run dev. Used when upgradingyarn upgradereplacenpm updateOrder. The default yarn is bound to the download source. If the download speed of the package is too slow, you can also configure the mirror source, but the commands are different:

# View the mirror sourceyarn config get registry

# Bind the image sourceyarn config set registry 

# Delete the mirror source (note that this is delete)yarn config delete registry

The version lock file of yarn is . If you have the need to manage multi-person collaborative warehouses, you can add it to the .gitignore file according to the actual situation, which facilitates unified team package management.

pnpm

pnpm is a rising star in the package management tool. Its main advantage is that it is fast and saves disk space. If your package has been downloaded in one project, other projects do not need to download it again, but are associated through soft links. The usage is very similar to other package managers, without much learning cost, and it supports npm and yarn commands. It must be installed globally before it can be used:

npm install -g pnpm

Currently, pnpm is being used in the open source community more and more, including the Vue/Vite team that has the most contacts, which are also gradually migrating to pnpm to manage dependencies. The download source of pnpm uses npm , so if you want to bind the mirror source, you can handle it in the npm way.

This is the article about several front-end package managers (npm/pnpm, etc.) that will introduce you to this. For more related package managers, please search for my previous articles or continue browsing the related articles below. I hope you will support me more in the future!