How to Create an NPM Packages using Rollup.js + Lerna.js + Jfrog Artifactory

📃In this article we will figure it out, how to create your own npm package using the following technologies:

• is a popular tool for managing JavaScript projects with multiple packages, often referred to as monorepos. It simplifies the process of versioning, publishing, and managing dependencies across various packages within a single repository.




• . But the free open source is a cut down version that doesn't have any pre-built settings for the npm repository. Let's do it step by step!

  
  
  
  
  

  1. Let's create a new virtual npm repository. It's necessary to install our npm package from external access (public repository).
     
     The JFrog virtual npm repository is a consolidated view of multiple npm repositories, allowing users to access and manage npm packages from various sources in a single location. It acts as a proxy for local and remote npm repositories, enabling seamless integration of public and private packages. This setup simplifies dependency management, enhances performance through caching, and provides a unified interface for package retrieval. Additionally, virtual repositories support security and access control, ensuring that only authorized users can access specific packages.
     
     
     
     
     
     or
     
     
     
     ). As for the usage of these libraries, we can look at the official documentation:

     
     
     
     
     
     
     
     
     
     

     ❗But I'd like to show you the details of the settings ⚙.

     
     
     

     
     
     
     Rollup settings
     

     
     
     

     After
     
     
     
     

  
  

  "peerDependencies": {

    "react": "^18.x",

    "react-dom": "^18.x"

  }

These peer dependencies ensures the package ui can be installed with the 18.x major version of the package react and react-dom only and these React libraries must be installed from your project (e.g. i installed them in my client project ) and limits react and react-dom versions to only major version 18.x

Also you can see other we can see lerna.json:

{

  "$schema": "node_modules/lerna/schemas/lerna-schema.json",

  "version": "independent",

  "packages": ["packages/*"],

  "npmClient": "yarn"

  // "command": {

  //   "publish": {

  //     "registry": "https://some-art.com/artifactory/api/npm/portfolio-yues-it-npm/"

  //   }

  // }

}

I added npmClientand command for testing lerna publish via yarn, but it didn't work for me and i published via yarn workspaces foreach no-private (we will it below ⬇).

An example of a project structure looks like this (❗Please note that in the settings you need to specify the prefix of the name of our root project):

to git via terminal (this is necessary for local publishing from a git repository) and test the connection for github: ssh -T ' we take from artifactory

enableStrictSsl: false



httpTimeout: 600000



nodeLinker: node-modules



npmRegistryServer: 'https://some-art.com/artifactory/api/npm/portfolio-yues-it-npm/'



yarnPath: .yarn/releases/yarn-4.5.1.cjs

  "dependencies": {

    "@portfolio-yues-it-npm/ui": "file:../portfolio-yues-it-npm/packages/ui",

    "react": "^18.3.1",

    "react-dom": "^18.3.1"

  },