Trying to create a private monorepo for a number of related NPM packages that can be installed separately

66 views Asked by At

I have a collection of internal color utilities that are broadly useful such as conversions and lightness and blends, and a set of libraries for creating named colors for theming which are not so broadly useful. I would like projects to be able to use the former separately from the later and have created a monorepo using package.json workspaces and Webpack. Here is the package.json:

{
  "name": "namedcolors",
  "version": "0.0.9",
  "workspaces": [
    "packages/*"
  ],
  "exports": {
    ".": "./distribution/index.js",
    "./colorutils": "./distribution/colorutils/index.js"
  },
  "scripts": {
    "test": "jest",
    "build": "npx babel src --out-dir distribution",
    "prepare": "npm run build & npm build --workspaces --if-present",
    "send-to-registry": "npm publish ./ --registry http://localhost:4873/",
    "start-verdaccio": "verdaccio"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@types/jest": "^29.5.0",
    "babel-jest": "^29.5.0",
    "jest": "^29.5.0"
  },
  "files": [ "*", "!packages/*", "!**/*.md", "!*.test.js", "!**/*.test.js" ]
}

And within the namedcolors/packages/colorutils I have a package.json:

{
  "name": "@namedcolors/colorutils",
  "version": "0.0.9",
  "main": "index.js",
  "scripts" : {
    "build": "npx babel . --out-dir ../../distribution/colorutils"
  },
}

I am able to get everything to spit out into the distribution folder and see the code getting put into the tar on Verdaccio, and I can npm install namedcolors --registry http://localhost:4873/, but can neither install '@namedcolors/colorutils' nor access '@namedcolors/colorutils' if I install 'namedcolors'. I can see the code in the package (I am wondering if I am missunderstanding what the @ does in these packages.) I cannot put "@colorutils": "./distribution/colorutils/index.js" in exports without getting an error.

Is what I am trying to do supported or do I need to build separate distributions folders to build Webpack to and publish those as separate package passes to Verdaccio for each? I apologize if this seems obvious but trying to work backwards from other monorepos where multiple installable packages exists is confusing and don't seem to be doing what I am trying to but I can see large projects that have multiple npm packages from a single repo.

I have look at using learna but it didn't seem to be doing anything, and have tried a variety of different package.json and packages designs but I am entirely cargo culting and don't know what the settings I am copying are supposed to do. I have looked at large packages, especially https://github.com/mui/material-ui, but I am not sure if there is something I am configuring wrong or if my entire approach trying to get package.json workspaces to make multiple packages is flawed.

The TDLR is I want one project for both of these libraries, but want to be able to install them independently and need to know the approach/design I should be using to achieve that.

0

There are 0 answers