My NPM best practices

This is the third day of my participation in Gwen Challenge

NPM opens the door for developers to connect to the entire JavaScript world. It is the largest repository of software dependencies in the world, with approximately 3 billion downloads per week, containing over 600,000 packages (i.e., code modules). Open-source software developers from all continents use NPM to share and learn from each other.

This article is a common NPM operation in my work, I hope to help you

NPM is compared with common Yarn commands

operation	NPM	Yarn
Install global dependencies	`npm install [package] -g`	`yarn global add [package]`
Install production environment dependencies and add them to DevDependencies	`npm install [package] --save`or`npm install [package]`	`yarn add [package]`
Install development environment dependencies and add them to devDependencies	`npm install [package] --save-dev`	`yarn add [package] --dev`
Add dependencies to peerDependencies	`npm install [package] --peer`	`yarn add [package] --peer`
Add to optionalDependencies	`npm install [package] --optional`	`yarn add [package] --optional`
Unloading global dependencies	`npm uninstall [package] -g`	`yarn remove global [package]`
Unload intra-project dependencies	`npm uninstall [package]`	`yarn remove [package]`

Yarn/NPM Taobao image Settings

The official addresses that yarn/ NPM installation depends on are all foreign (slow). We can set them to the domestic Taobao image to improve the installation speed

NPM Taobao mirror and official mirror switch

#Set to Taobao source
$ npm config set registry http://registry.npm.taobao.org/

#'After the above named run is complete, we need to verify that the setup is successful and can execute the following command'

#View the currently configured mirror
$ npm get registry
Copy the code

If you print out the address of Taobao, it indicates that the setting is successful, we can install the dependency faster.

However, sometimes we need to set the image as an NPM official image, such as when releasing NPM packages.

# Set the NPM official image
$ npm config set registry https://registry.npmjs.org/
Copy the code

Yarn Switch between the Taobao mirror and the official mirror

#Set to Taobao source
$ yarn config set registry https://registry.npm.taobao.org -g

#'After the above named run is complete, we need to verify that the setup is successful and can execute the following command'

#View the currently configured mirror
$yarn config get registry
Copy the code

#Set the yarn official image
yarn config set registry https://registry.yarnpkg.com
Copy the code

Publish a public package with a name starting with @

@angular and @ionic can both start with @. Why not mine? Both belong to the same Organization.

Packages like @teStorg/TestPackName can only be created after a new Organization has been created

How do I create an organization in NPM

For the first step, click Add Organization next to your profile picture

Next, enter the name of the organization you want to create

Note: The organization name must have a unique and valid name, otherwise the name will be invalid

NPM is set to the official image

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

Change the name of the local project package

Note NPM’s restrictions on package names: no uppercase letters/Spaces/sliders! Cannot be the same as the package name on the NPM website!

Modify package.json file with name beginning with @

{
  "name": "@orgname/xxxxxxx"."version": "0.0.1"
}
Copy the code

Replace orgName with the name of the organization created on your NPM site

Version specification

Refer to semantic version 2.0.0

Version: :” X.Y.Z”

Bug fixes, minor changes, added Z
Added new features, but still backward compatible, adding y
There is a big change, not backward compatible, add x

Add the organization name to the local account

Before publishing, we need to add the NPM remote corresponding organization to the local account to ensure that you have sufficient permissions to publish the package

npm adduser --scope=@orgname
Copy the code

Replace orgName with the name of the organization created on your NPM site

You will then be prompted to enter your account number, password and email address 📮 from the NPM website.

release

Notes before release:

Can only be releasedpublicThe public’s package

Check that the private field in package.json cannot be true

{
  "private": false
}
Copy the code

You can use the NPM search engine to check whether a package with the same name already exists before sending the package

Go to the official search for the name of your library before publishing. If there is a library with the same name, you need to change the name otherwise the publication will not succeed
The release number must be different

Each release requires a new version number; otherwise, the release cannot be normal

Finally, run the following command to publish the information

npm publish --access public
Copy the code

Release effect screenshot

Delete/revoke the NPM remote package

We use NPM unpublish [pack] –force to undo the published package

Here is an example: Delete the nsuedu-CLI package under the nsuedu organization

npm unpublish @nsuedu/nsuedu-cli --force
Copy the code

Note:

Even if you undo the package, you can no longer send the package with the same name and version as the package being revoked.

For example, an error message is displayed if you try to release a package with the same name and version after the package is revoked. You are advised to change the package version and name

Recommended alternative to NPM unpublish:

npm deprecate <pkg>[@<version>] <message>

Using this command will not undo your existing package in the community, but it will warn others when they try to install it that the package is no longer maintained

How do I update NPM dependencies

Reference: www.carlrippon.com/upgrading-n…

See which dependencies need to be updated

npm outdated
Copy the code

Install the latest version and replace the package with your own

npm install @package@latest
Copy the code

Change the default profile picture of user NPM

NPM uses the Gravatar avatar library.

After registration, if you want to change the default profile picture:

Click your profile picture in the upper right corner of the page ->Profile SettingsThe personal Settings page is displayed
Click under your avatarChange Your GravatarEnter theGravatarWebsite, if you do not have an account please register an account.
inhttps://en.gravatar.com/Select theMy Gravatars.
Add email: ClickAdd email address, enter registrationnpmThe email address of the account, then clickAdd.
To add a profile picture: ClickAdd a new image, if the picture is on the computer then selectUpload new, select an image and clickNext, clip the picture,
Click on theCrop Image, select an image level,GIt means everyone can see it,
And then clickSet RatingAnd then clickDo not use this image yet.
Add avatar to mailbox: click the mailbox, then click the desired avatar, then a popup window will appear, clickConfirmIt will be finished in a moment.

NPM site user profile picture synchronization will take a while to see.

Node-pre-gyp installation error resolved

$ yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-pre-gyp -g
Copy the code

Resolve NPM install permission issue on Mac

NPM is installed in the usr/local/ directory on the Mac system. Although it can be installed using Sudo, there are still problems when using tools such as NPX. So it’s best to move the global directory.

View the current`npm`Global installation position

$ npm config get prefix
/usr/local
Copy the code

Create a new directory under the user directory

mkdir ~/.npm-global
Copy the code

Set to`npm`global`prefix`

npm config set prefix '~/.npm-global'
Copy the code

Modify the`~/.profile`Environment variable file (create one if you don’t have one)

vi ~/.profile
Copy the code

Add the following

export PATH="~/.npm-global/bin:$PATH"
Copy the code

Updating environment variables

source ~/.profile
Copy the code

Check whether the Settings are successful (compare with step 1)

npm config get prefix
Copy the code

After that, modules installed using NPM install -g will be installed into ~/.npm-global

~/.npm-global also contains the bin and lib directories, where node_modules is contained.

Reinstall NPM

To test if the configuration is successful, we do not reinstall the global NPM using sudo

npm install npm@latest -g
Copy the code

/usr/local/lib/node_modules and /usr/local/bin/npm can be deleted after the installation is successful.

sudo rm -rf /usr/local/lib/node_modules
sudo rm -rf /usr/local/bin/npm
Copy the code

Check the installed global packages

NPM list-g --depth 0 /Users/ CLJ /.npm-global/lib ├ ─ [email protected]Copy the code

Modify the ZSH environment variable file

vi ~/.zshrc
Copy the code

Add the following

source ~/.bash_profile
source ~/.profile
Copy the code

Save and exit and update the environment variable again

source ~/.zshrc
Copy the code

Reference Documents:

Resolving EACCES permissions errors when installing packages globally

The last

This article is shallow, you are welcome to see the officer comments left your opinion!

Feel the harvest of the students welcome to like, pay attention to a wave!

The articles

What is NPM?
Understand the basic knowledge of JavaScript module system, and build their own library 🍜
How can I add commit hooks and automate code tasks with Git and Husky
Three key points of implementation of front-end business component library technology