How to set npm to load packages from multiple package sources at the same time

With the development and maturity of front-end and back-end separation technology, more and more back-end systems and even front-end systems adopt the front-end and back-end separation method. In large-scale front-end and back-end separation systems, the front-end often contains a large number of references to third-party js packages, and each third-party package may depend on another third-party package. Therefore, there is an urgent need for a tool for managing the dependencies between project packages. At this time, npm appears. npm is usually installed together with nodejs.

There is often such a situation in the project, that is, some js packages may be encapsulated within the company, and these packages may involve some private information and cannot be uploaded to the public repository of npm. Then a good way is to put these js packages encapsulated within the company into the repository built within the company, so as to ensure security. Usually we can build the internal npm package repository source of the company by installing verdaccio. After the construction is completed, we will upload the js packages encapsulated within our company to the private repository source within the company, and then set npm to search for packages from multiple repository sources when initializing the loading of packages, thereby realizing the function of npm loading packages from multiple repository sources at the same time.

1. Build local storage

First enter the command:

npm install -g verdaccio --save

To install the tool for building a private npm package repository, note: you need to install nodejs before executing this command.

After successful installation, the following figure is shown:

After successful installation, if it is on a Windows system, you can find the verdaccio configuration file: config.yaml in the %APPDATA%/Roaming/verdaccio directory, and you can also run it in the command line window

Enter the verdaccio command to start verdaccio. After successful startup, enter http://127.0.0.1:4873/ in the browser and you can see the following effect:

Since we haven't uploaded any private packages to it yet, an empty list is displayed. The following explains how to publish private packages to verdaccio.

2. Create an npm package and upload it to a private repository

First we create a test npm package and upload it to a private repository.

Use the npm init command to create a package.

After the creation is successful, we open the Test directory and we can see that a package.json file is generated. Open the newly added publishConfig node to publish this package to the address http://127.0.0.1:4873:

{
  "name": "@mylib/test",
  "version": "1.0.0",
  "description": "npm local package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "test"
  ],
  "author": "chenxin",
  "license": "ISC",
  "publishConfig": {
    "registry": "http://127.0.0.1:4873"
  }
}

Create a new index.js file in the directory where package.json is located. Because the main attribute above specifies index.js as the entry execution file of the package, the name must be named: index.js

Because we specified in the verdaccio configuration file that publishing and unpublishing packages requires logging in, we enter the following command to register a user.

The above means that the registration is successful and the login is complete. Because the current directory is exactly in the directory where the package.json file of the @mylib/test package is located, and the package.json file has specified the repository address to which the package is to be published, we can directly use the npm publish command to publish the @mylib/test package to the private repository. After successful publishing, it is shown in the following figure:

3. Search from multiple repositories when setting up npm installation packages

By entering the command:

npm config set @mylib:registry=http://127.0.0.1:4873

The above command tells npm to load all packages starting with @mylib from http://127.0.0.1:4873.

4. Test whether npm can load packages from multiple repositories at the same time

Enter the command: npm init to create a package.json file for a project

Enter the following two commands to install the jquery package and @mylib/test package respectively, where the jquery package is loaded from the external repository source.

npm install jquery --save
npm install @mylib/test --save

At this point you can see that node_modules already contains the two packages installed above

The package.json also contains the dependencies of the above two packages

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "Test project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "test"
  ],
  "author": "chenxin",
  "license": "ISC",
  "dependencies": {
    "@mylib/test": "^1.0.0",
    "jquery": "^3.6.0"
  }
}

At this time, we delete the node_modules directory and enter the command line (this command must be executed in the directory where package.json is located):

npm init

Observe whether the node_modules directory is regenerated and contains the two packages included in package.json. If both are included, it means that npm already supports loading packages from multiple repositories at the same time.

This is the end of this article about how to set npm to load packages from multiple package sources at the same time. For more information about how to set npm to load packages from multiple package sources at the same time, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!