I'am trying to achieve a plugin system for my typescript SPA, but I'am not sure how to approach this in terms of code bundling/splitting.

Current setup

The frontend and backend is implemented with Typescript / ESM.

Frontend:

• Vuejs 3
• Vitejs/Rollup
• Pinia

Backend/API:

• NestJs with Express/RestAPI

The app currently consist of 3 npm packages:

• Server: NestJs Server Application
• Web: Vuejs Frontend / UI Components
• Common: Shared models and interfaces and utilities between frontend and backend

Requirements

I want to enable third parties to implement additional modules for this platform installable e.g. via NPM or ideally by just copying the module into a modules directory or some kind of marketplace in the future.

A third party module should be able to import and use classes from the core frontend/backend and common packages similar to the core modules itself. For example, a third party module should be able to access services/models/ui-components and stores of a core calendar module.

Ideally this should work without the need to rebuild the whole frontend/backend. I'am coming from languages like Java and PHP in which you have namespaces, packages and classloaders. I'am not sure how to bundle something like this in a javascript application especially for the frontend.

So my questions are:

• How to bundle/split the core packages
• How to import core packages within third party modules
• How to build, bundle/split the third party packages

I assume I have to somehow add those core dependencies as externals within the third party module and provide the core bundles as UMD or ESM.

Would be great if someone could point me in the right direction and can provide me with some hints, resources, best practices or even existing/similar solutions.