So I have been trying developing own package: dicom-web-anonymizer (dwa) which relies on a third-party package called dcmjs. As dcmjs is not typed, I created my own declaration file under /types. That worked, and now I wanted to test and bundle everything with vite and import my package inside another project ADIT (upload branch). As I am using dcmjs also in ADIT, I imported it there in the core_layout.hmtl, declared it in globals.d.ts and everything works fine. I declared dcmjs as external in my vite.config.ts in dwa and made sure I imported it after dcmjsin my core_layout.html.
Here my current vite.config.ts:
import { resolve } from "path";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
export default defineConfig({
build: {
lib: {
// Could also be a dictionary or array of multiple entry points
entry: "./src/index.ts",
formats: ["umd"],
name: "dicom-web-anonymizer",
// the proper extensions will be added
fileName: "dicom-web-anonymizer",
},
sourcemap: true,
rollupOptions: {
input: "./src/index.ts",
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ["dcmjs", "fs", "get-random-values"],
output: {
format: "umd",
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
dcmjs: "dcmjs",
fs: "fs",
"get-random-values": "get-Random-Values",
},
plugins: [dts()],
},
},
},
});
and index.ts in my demo-vite project is only:
export { Anonymizer } from "../../src/anonymizer.ts";
Note: the Anonymizerclass is everything I want to export and my sole entrypoint to the whole module.
Now my question: I have no idea what I am doing wrong and how I need to import my .umd.cjs files and how I can basically just get a line like
const anon = new Anonymizer();
to work.
I tried to include just the .js files but it also doesnt work.
I am new to module formats like es or umd so I am not exactly familiar what their differences are and how exports from bundled packages work like in the different ways.