It's 2022, you can't still only npm i? 🔥

Jump across keycaps and characters, navigating through code and programs. Let's face the happy programming together!

Hello everyone, I'm Rongding, and I'm going to give you three golds and four silvers. This time, I will bring you an article related to npm commands. The purpose is to fill in gaps and improve efficiency.

As a node package manager, npm has a lot of built-in commands for our daily development. Remembering the commands listed below will bring great convenience to daily development.

Well, not much to say, look at the code👇

Add a star to your favorite package (similar to github's star)

In fact, I regard adding stars as a collection operation. In fact, in npm, it is the function of collection, because on the official website, we cannot clearly see how many stars there are in this repository like github.

npm star [package-name]

unfavorite

npm unstar [package-name]

View Favorites List

npm stars

These operations will report errors under your account, so it is very convenient. Don't worry about not being able to see other places after the unit is operated. You only need to have an npm account. If you don't have one, you can read the second section of this article👇 , register one and log in.

log in to npm

First of all, you must have an npm account. If you don’t have one, just register one at 👉npm official website .

Note: For an account registered on the official website, an error will be reported when using Taobao source when logging in. Change back to the default source

It is recommended to use nrm or yrm to quickly switch mirror sources. Personally, yrm is recommended. Why? See the figure below

yrm will switch your npm and yarn together at the same time, and there will be a * mark after ls to mark the source currently being used.

Of course you can manually npm switch to the default source

npm config set registry https://registry.npmjs.org

Then execute the command npm login and fill in the user name, password and email in turn. If you have other protections set up on the npmjs site, you will also need to enter some verification codes and so on...

npm adduser
# or
npm login
# login是adduser的一个别名

You can view the current npm login person with the following command

npm whoami

View documentation for a package

Every time we want to open the document of a certain package in the browser, we are always used to go to the search engine to search. In fact, things that can be solved by one line of commands, don't go to Baidu to search again~

# 此命令会尝试猜测包文档 URL 的可能位置，一般没有自定义的话，就会打开包的github地址。
npm docs [package-name]
# or
npm home [package-name]

Try the following command to quickly open the official documentation of lodash👇

npm docs lodash
# or
npm home lodash

When the npm docs or npm home command does not accept parameters, it will open the corresponding address in the current project through the homepage configuration in the package.json file.

As shown in the figure above, the principle is: when the package.json file in the project you want to view has the homepage attribute set, the corresponding homepage can be opened through npm docs/home , and if the homepage attribute is not set, npm will continue to look for the repository attribute. At this time, the project's hosting address url in github is spliced with "#readme" (for example: https://github.com/ username/warehouse name#readme), if you have not set the repository property, then It will open the address of the package in the npm official website, (for example: https://www.npmjs.com/package/npm-limit )

Of course, you can also leave the parameters after npm docs/home , and it will directly open the homepage of the current project.

View the code repository of a package

Want to see the source code of a package? Go to github to search for nonono, which is also a line of code.

# 此命令尝试猜测包的存储库 URL 的可能位置
npm repo [package-name]

👆 It opens the corresponding url according to the repository property set in the package.json file in the project.

Quickly file issues for a package

npm bugs [package-name]

👆 It opens the corresponding url according to the bugs property set in the package.json file in the project.

View details about a package

What is the use of this command? It is very convenient to see the detailed information of the specified package, for example, we want to find the author of the package and the contact information of ta (communication and learning).

npm v [package-name]
# or
npm view [package-name]
npm info [package-name]
npm show [package-name]

View all historical versions of a package

npm v [package-name] versions

How to debug locally developed npm packages

We can install locally developed npm packages to a global or specified directory as usual.

npm install . -g

# 在某个项目中安装本地包
npm install ../Path/xxPackageName

You can also make a soft link pointing to the current project that needs to be debugged (global)

npm link

Link the debug package to the current project (first make a soft link pointing to the current project that needs to be debugged)

# 先在本地开发的 npm 包中执行👇
npm link
# 然后切换到你要安装本地调试包的项目中，执行👇，即可将本地包安装到项目依赖中
npm link <package-name>

# 项目中取消安装本地的调试包👇
npm unlink <package-name>

npm release package

First of all, you have to log in locally (you can't read the login method at the beginning of the article 👆)

After the login is complete, publish the toolkit developed by yourself, just three simple steps!

Note: If you use Taobao source, you will get an error, you need to change back to the default source

Remember to revise the version number before each release!

npm version [版本号]

Then the current directory executes npm publish just fine

npm publish

Actions for deprecated packages

Note: It is strongly recommended to deprecate packages or package versions rather than unpublish them, as unpublishing completely removes a package from the registry, meaning anyone who depends on it will no longer be able to use it without warning.

Deprecate the entire package

npm deprecate package-name "弃用信息"

A single version of a deprecated package

npm deprecate package-name@version "弃用信息"

Cancel deprecated actions

# 将弃用消息改为空字符串即可
npm deprecate package-name ""

Unpublish (dangerous operation)*

Unpublish the entire package

npm unpublish [package-name] -f

Unpublish the specified version of the package

npm unpublish [package-name]@<version>

After unpublishing a package, republishing with the same name will be blocked for 24 hours. If you unpublished a package by mistake, we recommend that you republish it under a different name, or for an unpublished version, increase the version number and publish it again.

Some other useful actions

package renaming

# （重命名包的唯一方法是以新名称重新发布它）

See which packages are out of date in the current project

npm outdated

Check which packages are outdated in the local global environment

npm outdated -g --depth=0

List all packages in node_modules

ls node_modules
# or
dir node_modules

Audit all packages in the project for security vulnerabilities

npm audit
# 这个命令依赖 package-lock.json 文件,所以如果你用的是yarn需要使用下面的命令
yarn audit

After execution, the problematic package will be listed

hahh	hah
Critical	need to be resolved immediately!
High	Need to be resolved ASAP!
Moderate	Resolve as time permits
Low	Whatever you want, don't panic, don't be in a hurry

The severity of the problem will be given in the report, and you can update or adjust the version according to the specific situation.

npm token list

Check the delay of the current mirror source

npm ping

Detect problems with current node and npm👇

npm doctor

finally

I am Rongding, a front-end developer for happy programming 🥰
If you also love front-end related technologies! scan it👇 pull you into the front-end exchange group of 100 people🦄

Reply [Add group] , will pull you into the learning exchange group, and make progress together with other front-end enthusiasts!
Reply [books] to get a lot of front-end pdf books.