background

Following the idea of micro front end, we need to extract the common component part into a package and provide it to each sub-service to import and use.

Therefore, a management package warehouse is needed, which is to build the NPM warehouse belonging to the project team.

Every Internet search is sinopia, and it’s pretty quick to pick up and start up in a minute, but!! After a long time, I found that this thing has not been updated for so many years. Once again, they all use Verdaccio now. Lesson of blood and tears!! [technical selection must pay attention to the time of the article! Then pay attention to the download and modification time on NPM!!]

The official document: www.npmjs.com/package/ver…

According to the official documents, I first built a private library on the local Window computer, and can provide a group of friends to use, then the warehouse will be deployed on the Linux server, and then.

Setting up an NPM private library

Download Verdaccio

Run the following command in any path:

npm install --global verdaccio
Copy the code

2. Start the local warehouse

Run the following command in any path:

verdaccio
Copy the code

3. Modify the NPM download warehouse address

First, you can query the NPM configuration of the current computer by running the command in any path:

npm config ls
Copy the code

Select * from registry = registry.npmjs.org/ and run the following command:

npm set registry http://localhost:4873/
Copy the code

4. Ensure that you have registered your account and password on NPM’s official website

Please register an account on the NPM official website, and remember the user, password and email, which will be needed for subsequent package uploading.

5. Add user name and password to Verdaccio

First, you can query whether the user has registered and logged in. Run the following command in any path:

npm who am i
Copy the code

If the following screenshot appears, you will be prompted to need NPM adduser:

Run command:

npm adduser --registry http://localhost:4873
Copy the code

Enter the registered user, password, and email address on the official website.

User :\Users\ XXX \AppData\Roaming\ Verdaccio folder/folder/folder/folder/folder/folder/folder/folder/folder/folder Htpasswd.

Upload and download your package

You can upload your package directly, and you can create a test package to try:

6.1 Initializing packages

Create folder demo, go to the folder, and run the following command:

npm init -y
Copy the code

This command initializes the local repository, generating a package.json file that contains some basic information, such as stating that the entry main is index.js.

6.2 Creating the package entry file index.js

Package. json creates an index.js file with the following contents:

Console. log(' test test test test!! ')Copy the code

6.3 Releasing the Demo Package

Run the following command in the Demo folder:

npm publish --registry http://localhost:4873
Copy the code

Refresh verdaccio page: see demo package!! Finally made it!!

6.4 Downloading the Demo Package

Create a new folder, go inside and run the following command:

npm install demo
Copy the code

Download was successful!!

6.5 Release tests again

If the package is not published for the first time, a version error occurs:

In the demo folder, run the version +1 command:

NPM version patch -m "version %s -v0.0.1"Copy the code

The command is the last bit of the version number plus 1. Then execute the issue command again:

npm publish --registry http://localhost:4873
Copy the code

If you succeed, you will not see the error shown above, but instead look like this:

Also: sometimes the version error shown in the above image is due to the package filename being used, which is a public library filename such as vue.

7. For project team members

7.1 Changing services to Start by IP Address

By default, after verdaccio is started, the access address is localhost. Even if the local IP address is entered, the access cannot be accessed. You need to find the configuration file and modify it. C:\Users\ XXX \AppData\Roaming\verdaccio\config.yaml

Listen: 0.0.0.0:4873Copy the code

Then restart the Verdaccio service.

7.2 Re-uploading the Package

After the restart, the console access address changed from localhost:4873 to 0.0.0.0:4873. Browser input local IP:4873 can access, access found that just uploaded package is not, don’t panic because the IP is different, so re-upload.

7.3 Changing the ADDRESS of the NPM Download Repository

Enter the command:

npm set registry http://IP:4873
Copy the code

In this case, error E401 will be reported, indicating no login.

7.4 Logging in to the Private Library built by Verdaccio

Enter the command:

npm login
Copy the code

If this fails, try the following command:

npm adduser --registry http://IP:4873
Copy the code

At this point, direct upload will report an error version conflict.

7.5 Changing the Version Number

In the path of the package to be uploaded, run the version +1 command:

NPM version patch -m "version %s -v0.0.1"Copy the code

Then run the upload package command:

npm publish --registry http://IP:4873
Copy the code

7.6 Providing a Private Library address for Downloading

You need to set the NPM repository address first. Run the following command in any path:

npm set registry http://IP:4873/
Copy the code

Run the following command to install the Demo package:

npm install demo
Copy the code

After the

Other instructions

1, a lot of commands followed by the – Registry warehouse address, in fact, as long as the NPM set Registry warehouse address is not a problem, is not in the command after the addition of – Registry, but in order to ensure that the warehouse is not wrong, unnecessary action also line, the follow-up operation can be removed after skilled.

2, upload error, do not want to append the version, you can delete the last version of the package, command:

NPM unpublish [email protected]Copy the code

3. At first, I thought that the NPM warehouse was set to the local Verdaccio. What if the package is not in the local warehouse? Do you want to switch back and forth between NPM library addresses? Of course not. If there is no package in the local warehouse, Verdaccio will go to its configured warehouse address. That is to say, if you want to download the official vUE package, NPM asks Verdaccio for it, but Verdaccio does not have it, it will go to its configured warehouse to get it and forward one layer.

Then the verdaccio repository configuration is still the config.yaml file mentioned earlier. Change the url as follows:

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
Copy the code

Many people recommend to change the address to Taobao image registry.npm.taobao.org/ for the sake of fast package delivery.

I think the speed is ok, but I had problems downloading some packages with CNPM before, but NPM is good.

Not to mention

If you need to install in Linux, you can use pM2 to always protect the verdaccio process, which has not been tried.

This project team installed a window server, as for guarding the service boot since the start of the operation and maintenance of it.