Help Center/ CodeArts Artifact/ Getting Started/ Releasing/Obtaining an npm Component via a Build Task
Updated on 2024-11-11 GMT+08:00

Releasing/Obtaining an npm Component via a Build Task

This section describes how to release a component to an npm repository via a build task and obtain a dependency from the repository for deployment.

Prerequisites

Releasing a Component to an npm Repository

  1. Download the configuration file.

    1. Log in to CodeArts Artifact and access the npm repository. Click Settings in the upper right corner and record the repository path.

    2. Click Cancel to return to the npm repository page. Click Tutorial on the right of the page.
    3. In the displayed dialog box, click Download Configuration File.

    4. Save the downloaded npmrc file as an .npmrc file.

  2. Configure a repository.

    1. Go to Repo and create a Node.js repository. For details, see Creating a Repository Using a Template. This procedure uses the Nodejs Webpack Demo template.
    2. Go to the repository and upload the .npmrc file to the root directory of the repository. For details, see .

    3. Find the package.json file in the repository and open it. Add the path recorded on the Basic Information under the Settings tab page to the name field in the file.

      If the name field cannot be modified, add the path to the Include Patterns field on the Basic Information under the Settings tab page.

  3. Configure and run a build task.

    1. On the Repo page, select a repository and click Create Build Task in the upper right.

      Select Blank Template and click OK.

    2. Add the Build with npm action.

    3. Edit the Build with npm action.
      • Select the desired tool version. In this example, nodejs12.7.0 is used.
      • Delete the existing commands and run the following instead:
        export PATH=$PATH:/root/.npm-global/bin
        npm config set strict-ssl false
        npm publish

    4. Click Save and Run on the right of the page to start the build task.

      After the task is successfully executed, go to the self-hosted repo page and find the uploaded npm component.

Obtaining a Dependency from an npm Repository

The following procedure uses the npm component released in Releasing a Component to an npm Repository as an example to describe how to obtain a dependency from an npm repository.

  1. Configure a repository.

    1. Go to Repo and create a Node.js repository. For details, see Creating a Repository Using a Template. This procedure uses the Nodejs Webpack Demo template.
    2. Obtain the .npmrc file (see Releasing a Component to an npm Repository) and upload it to the root directory of the repository where the npm dependency is to be used.
    3. Find and open the package.json file in the repository, and configure the dependency to the dependencies field. In this document, the value is as follows:
      "@test/vue-demo": "^1.0.0"

  2. Configure and run a build task.

    1. On the Repo page, select a repository and click Create Build Task in the upper right.

      Select Blank Template and click OK.

    2. Add the Build with npm action.

    3. Edit the Build with npm action.
      • Select the desired tool version. In this example, nodejs12.7.0 is used.
      • Delete the existing commands and run the following instead:
        export PATH=$PATH:/root/.npm-global/bin
        npm config set strict-ssl false
        npm install --verbose

  3. Click Save and Run on the right of the page to start the build task.

    After the task is successfully executed, view the task details. If information similar to the following is found in the log, the dependency has been downloaded from the npm repository.

npm Commands

When configuring build tasks, you can also run the following npm commands as required:

  • Delete an existing component from the npm repository.
    npm unpublish @socpe/packageName@version
  • Obtain tags.
    npm dist-tag list @scope/packageName
  • Add a tag.
    npm dist-tag add @scope/packageName@version tagName --registry registryUrl --verbose
  • Delete a tag.
    npm dist-tag rm @scope/packageName@version tagName --registry registryUrl --verbose

Command parameter description:

  • scope: path of a self-hosted repo. For details about how to obtain the path, see Releasing a Component to an npm Repository.
  • packageName: the part following scope in the name field of the package.json file.
  • version: value of the version field in the package.json file.
  • registryUrl: URL of the self-hosted repo referenced by scope in the configuration file.
  • tagName: tag name.

The following uses the component released in Releasing a Component to an npm Repository as an example:

  • scope: test
  • packageName: vue-demo
  • version: 1.0.0

The command for deleting this component is as follows:

npm unpublish @test/vue-demo@1.0.0