Background of technology selection

In the process of the company’s digital transformation, it is inevitable for the technical team to take the lead and do some key and efficient things. Recently, the front-end project team has been merged and organized, and suddenly there are a lot of things to do. The construction of NPM private server and the construction of NPM self-package should be set up and done.

Technical implementation selection

Due to multiple tasks and time constraints, everyone is constructing NPM private server while doing requirements. At present, verdaccio and Sinopia are the most popular tools for front-end private server construction. Since the creator of Sinopia no longer maintains and changes the project, The author of Verdaccio, a fork of it, has been maintaining the project. Considering various states, we chose Verdaccio as the final building tool of the private server.

Verdaccio advantage

Verdaccio is a simple, zero configuration required for the local private NPM registry. You don’t need the entire database to get started! Out of the box, Verdaccio has its own small database that can proxy other registries, caching downloaded modules along the way.

Environment preparation

  • The NPM or YARN package manager version must be a long-term and stable version
  • NRM NPM image source management tool
  • Pm2 node process management daemon

Please configure the above environment, this document does not do too much explanation, PS: online information is very rich.

NPM Private server setup procedure

  • 1. Global installationverdaccio
    • npm install --global verdacciooryarn add --global verdaccio
  • 2. Modify the configuration fileconfig.yamlFile location:C:\Users\(user name)\AppData\Roaming\verdaccio

Because the default configuration yamL file can not be parsed, can only put screenshots, screenshots withVScodeThe plug-in PolaCode, full screen, interested partners can have a try.

The following is the Internet commonly used property Settings Chinese configuration

/storage # Configure the WEB UI. WEB: title: "build private NPM" #logo: logo.png # Set the user authentication file. Uplinks: NPMJS: url: uplinks: NPMJS: url: uplinks: NPMJS: url: https://registry.npmjs.org/ # configuration rights management packages: '@ / : $all = "all"; $anonymous = "anonymous"; $all = "authenticated"; Publish: $all # indicates which type of users are allowed to publish items that match publish: $all # indicates which type of users are allowed to install items that match $authenticated # If an NPM package does not exist, it will ask the set agent. Logs: -{type: stdout, format: pretty, level: HTTP} #-{type: file, path: verdaccio.log, level: } # Modify port listen: 0.0.0.0:4873Copy the code
  • 3, Qigong private server
    • Execute the commandverdaccio
PS C:\Users\ci21843> verdaccio warn --- config file - C:\Users\ci21843\AppData\Roaming\verdaccio\config.yaml warn --- Verdaccio started warn --- Plugin successfully loaded: verdaccio-htpasswd warn --- Plugin successfully loaded: Verdaccio - audit warn the HTTP address - http://192.168.14.139:4873/ - verdaccio / 4.8.1Copy the code
  • Open thehttp://192.168.14.139:4873/

  • 4. Switch agent

    # check the proxy configuration PS C: \ Users \ ci21843 > NRM ls * NPM yarn -- -- -- -- -- -- -- -- https://registry.npmjs.org/ -- -- -- -- -- -- -- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.org/ taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm ----- http://registry.enpmjs.org/ # add local environment image PS C: \ Users \ ci21843 > NRM add ceshi http://192.168.14.139:4873/ add registry ceshi Success USES the local agent PS # C: \ Users \ ci21843 > NRM use ceshi Registry has had been set to: http://192.168.14.139:4873/Copy the code

  • 5. Add the login user

PS C:\Users\ reporter 1921> NPM who am I NPM ERR! code ENEEDAUTH npm ERR! need auth This command requires you to be logged in. npm ERR! Need auth You need to authorize this machine using 'NPM adduser' # register PS C:\Users\ subscriber 1921> NPM adduser Username: Code1921 Password: Email: (this IS public) [email protected] # Login PS C:\Users\ human 1921> NPM login Username: Code1921 Password: # Password input does not show Email: (this IS public) [email protected]Copy the code
  • 6. Publish the package toVerdaccioThe environment
{"name": "npm-package-demo", "version": "1.0.0", "description": "my first test package", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [ "npm", "package" ], "author": "code1921", "license": "ISC" }Copy the code
# Define the version number before release PS C:\Users\ reporter 1921> NPM publishCopy the code

conclusion

These resources can be searched on the Internet, but in the specific operation, there will still be a little bit of problems, some commands are executed many times before success, most of the time because the NPM agent did not switch in time, and the environment is not stable, sometimes after the release of NPM service will automatically shut down. Pm2: Node process guard (pM2: node process guard command tool). It’s pretty simple to implement. We’ll do some CI/CD things with Jenkins.