Use Verdaccio to build a private npm warehouse

Building a team's private warehouse to ensure the security, maintenance and privacy of team components is an indispensable skill on the road to becoming a front-end development manager.

1. Principle

When we usually use npm publish to publish, the default address of the uploaded warehouse is npm. Use the Verdaccio tool to create a local warehouse address, and then switch the local default upload warehouse address to the local warehouse address. When npm install does not find the local repository, Verdaccio's default configuration will download it from the npm central repository.

2. Commonly used warehouse addresses

npm : https://registry.npmjs.org/
cnpm : http://r.cnpmjs.org/
taobao: https://registry.npm.taobao.org/

3. Advantages

Highly private, only shared by the team.
It has high security and can effectively prevent malicious code attacks.
Using LAN, the transmission speed is fast.

4. Prepare the environment

node (v12 or higher)
npm (pnpm or yarn)
verdaccio（v5）
nrm (quickly switch warehouse sources)
pm2 (daemon)

6. Use verdaccio to build a private npm service

Install

npm install -g verdaccio

run

It will take a long time to start. Disconnecting cmd will shut down the service. You can use the pm2 daemon.
// Visit http://localhost:4837

verdaccio

Configure config.yaml to enable shared access under the LAN, otherwise it can only be accessed locally.

C:\Users\admin\AppData\Roaming\verdaccio\config.yaml
//Add the following configuration at the end
listen: 0.0. 0.0:4873
Restart, the computer must be restarted for the configuration to take effect.

Rerun

// Visit http://ip:port/
// Do not access localhost

verdaccio

7. Common npm operations

View current user information

npm who am I

View source address

npm config list

Switch source address

npm set <registry> <url>

Delete source address

npm config rm <registry>

Create user

npm adduser

Log in

npm login

release

npm publish

8. Project use

You can set up the registry with the following command.

npm set registry http://localhost:4873/

You can pass the --registry parameter if needed.

npm install --registry http://localhost:4873

Set a registry property in your .npmrc.

.npmrc
registry=http://localhost:4873

Or set publishConfig in your package.json

{
  "publishConfig": {
    "registry": "http://localhost:4873"
  }
}

9. Plug-in upload

Set mirror source

npm set registry http://localhost:4873/

Take vuecli3 library mode as an example

1. Add a new command to compile into a library in package.json

"lib": "vue-cli-service build --target lib --name vue-verdaccio-zourongle --dest lib src/plugins/index.js"

–target : Build indicator, default is utilization mode. This modification enables library mode for lib.
–dest: Input directory, default dist. Here we change it to lib
[entry]: The last parameter is the entry file, and the default is src/App.vue. Here we specify the compilation src/plugins/index.js component library directory.
–name: Output name, here we change it to our own name

2. Configure package.json

{
    "name": "vue-verdaccio-zourongle",
    "version": "0.1.0",
    "description": "今天我发布一个插件",
    "main": "lib/vue-verdaccio-zourongle.umd.min.js",
    "license": "MIT",
    "private": false
}

private: must be set to fasle
main: my project entry, the default is index.js in the same level directory
name: npm package name , which is the package name in our import xxx from packagename

Log in to npm

登录到 npm login

Publish to npm

npm publish