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