It’s 2222. You can’t just be NPM I, can you? 🔥

I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

Jump across keycaps and characters, move through code and programs. Programming for happiness together!

Hello everyone, I am Rong Ding, soon gold three silver four ~ this time to bring you a NPM command related article. The purpose is to fill in the gaps.

NPM, as the Node package manager, comes with a lot of built-in commands for your daily development. Keep in mind that the commands listed below will be very convenient for your daily development.

Ok, without further ado, look at the code 👇

Add a star to your favorite bag (similar to Github’s Star)

Actually, I regard adding stars as a collection operation, which is the function of collection in NPM, because on the official website, we can’t see how many stars there are in this warehouse as clearly as Github.

npm star [package-name]
Copy the code

Cancel the collection

npm unstar [package-name]
Copy the code

View the favorites list

npm stars
Copy the code

These operations will report errors under your account, so it is very convenient. Do not worry about the machine after the operation of other places. All you need is an NPM account. If you don’t have one, see section 2 of this article, 👇, and sign up.

Login NPM

First of all, you should have an NPM account. If you don’t have one, you can register on 👉 NPM official website.

Note: For accounts registered in the official website, there will be an error when logging in using Taobao source, so change back to the default source

NRM or YRM is recommended to quickly switch between image sources. Personally, YRM is recommended. Why? See below

Yrm will switch your NPM and YARN at the same time, and there will be * after ls to mark the source that is currently in use, remember NRM used to have it, now I don’t know what happened…

Of course you can manually switch NPM to the default source

npm config set registry https://registry.npmjs.org
Copy the code

Then run the NPM login command and enter the user name, password, and email address in sequence. If you have other protections on your NPMJS site, you will need to enter some captcha and so on…

npm adduser
# or
npm login
# login is an alias of adduser
Copy the code

You can view the current NPM logins by using the following command

npm whoami
Copy the code

View the documentation for a package

Every time we want to open the document of a package in the browser, we tend to turn to the search engine, but in fact, a line of command can solve the matter, do not search baidu ~

# This command attempts to guess the possible location of the package document URL, usually opening the github address of the package if there is no customization.
npm docs [package-name]
# or
npm home [package-name]
Copy the code

To quickly open the official LoDash documentation 👇, try the following command

npm docs lodash
# or
npm home lodash
Copy the code

If the NPM docs or NPM home command takes no parameter, the corresponding url in the package.json file’s homepage configuration will be opened.

As shown above, it works like this: When you are looking at the projectpackage.jsonFile, sethomepageProperties, bynpm docs/homeWill open the corresponding home page, no SettingshomepageProperty, NPM continues to look forrepositoryProperty, which opens the url concatenation “#readme” for the project’s hosting address on Github (for example:#rea…The address of the package in the NPM website, (for example:www.npmjs.com/package/npm…

Of course, you can also set no parameters after NPM docs/home, which will bring up the main page of the current project.

View the code repository for a package

Want to see the source code for a package? Have to go to Github to search? Nonono is also a line of code.

# This command attempts to guess the possible location of the package's repository URL
npm repo [package-name]
Copy the code

👆 opens the url for the repository property set in the package.json file in the project.

Quickly address issues to a package

npm bugs [package-name]
Copy the code

👆 it opens the url based on the bugs property set in the package.json file in your project.

View the details of a package

What does this command do? It is easy to see the details of a given package, for example we want to find the author of the package and the ta’s contact information (exchange learning).

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

View all historical versions of a package

npm v [package-name] versions
Copy the code

How to debug NPM packages developed locally

We can install locally developed NPM packages globally or in designated directories as usual.

npm install . -g
Copy the code

Install local packages in a projectnpm install .. /Path/xxPackageNameCopy the code

You can also make a soft link pointing to the current project that you want to debug (global)

npm link
Copy the code

Link the debug package to the current project (make a soft link to the current project)

Run 👇 in the NPM package you developed locally
npm link
Then switch to the project where you want to install the local debug package and run 👇 to install the local package into the project dependencies
npm link <package-name>

# uninstall the local debug package 👇 in the project
npm unlink <package-name>
Copy the code

NPM distribution package

First, you need to log in locally (no, see 👆).

Once logged in, publish your own toolkit in three simple steps!

Note: Using Taobao source will report an error, please change back to the default source

Remember to change the version number before each release!

NPM version [version number]Copy the code

Then do NPM publish for the current directory

npm publish
Copy the code

Actions related to deprecating packages

Note: Deprecating packages or package versions rather than unpublishing them is strongly recommended, because the unpublishing release completely removes a package from the registry, meaning that anyone who relies on it will no longer be able to use it without warning.

Discard the whole package

npm deprecate package-name "Deprecated information"
Copy the code

Deprecate a single version of the package

npm deprecate package-name@version "Deprecated information"
Copy the code

Cancel the deprecation operation

Change the deprecated message to an empty string
npm deprecate package-name ""

Copy the code

Cancel publication (dangerous operation) *

Cancel publishing the entire package

npm unpublish [package-name] -f
Copy the code

Cancels the release of the specified version of the package

npm unpublish [package-name]@<version>
Copy the code

Redistribution under the same name will be blocked for 24 hours after unpublishing the package. If you unship a package by mistake, we recommend that you redistribute it under a different name or, for unreleased versions, increase the version number and redistribute it.

Some useful other operations

Package renaming

# (The only way to rename a package is to republish it with a new name)
Copy the code

See which packages in the current project are obsolete

npm outdated
Copy the code

See which packages in the local global environment are out of date

npm outdated -g --depth=0
Copy the code

Lists all packages in node_modules

ls node_modules
# or
dir node_modules
Copy the code

Audit all packages in the project for security vulnerabilities

npm audit
# This command relies on package-lock.json, so if you are using YARN you need to use the following command
yarn audit
Copy the code

The problematic packages are listed after execution

hahh	hah
Critical	It needs to be fixed immediately!
High	Need to be resolved asap!
Moderate	Work it out as time permits
Low	Whatever. Don’t panic, don’t freak out, don’t rush

The report will give you the severity of the problem, so you can make updates or adjustments as needed.

npm token list
Copy the code

Check the latency of the current mirror source

npm ping
Copy the code

Detect problems with current Node and NPM 👇

npm doctor
Copy the code

The last

I am Rongding, a front-end development for happy programming 🥰

If you love front-end technology too! Click → Front-end Superman technology exchange group