Bundle package with custom declaration file and import in other project

24 Views Asked by At

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.

0

There are 0 best solutions below