4

I am new to pnpm workspaces and am trying to resolve the following issue.

My demo project:

  • root
    • packages
      • common-ui
      • main-lib

common-ui is a Vite based package containing some Vue components that can be reused by other packages, in my example it's being used by main-lib.

"dependencies": {
  "ui-common": "workspace:*"
},

common-ui is referencing an index.ts inside its package.json

"main": "index.ts",

index.ts is exporting my Vue components:

...
export { default as Heading } from './components/Heading/Heading.vue';
...

Now I am able to import those components inside main-lib:

import { Heading } from 'common-ui'

This all works fine but I would also like to be able to publish my library to the npm registry. As common-ui is using the Vite, it's possible to build in library mode: https://vitejs.dev/guide/build.html#library-mode. My package inside common-ui will need to change to:

{
  "name": "common-ui",
  "files": ["dist"],
  "main": "./dist/common-ui.umd.js",
  "module": "./dist/common-ui.es.js",
  "exports": {
    ".": {
      "import": "./dist/common-ui.es.js",
      "require": "./dist/common-ui.umd.js"
    }
  }
} 

main is not referencing index.ts anymore but a dist folder that only gets updated when the vite command is ran. Is there a way for me to support both publishing/versioning and referencing the actual source code from inside main-lib?

I've taken a quick look at Rush.js but I am not sure if provides a solution and I want to be sure before I continue on that path.

Jdruwe
  • 3,450
  • 6
  • 36
  • 57

0 Answers0