How to generate .d.ts after vite build?

[peterroe]

By default, vite not generate .d.ts in lib mode.
I try to find some plugins to solve it, but I cant't the effective plugin. Anybody can help me ? :(

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom',
  },
  build: {
    lib: {
      entry: './src/main.ts',
      formats: ['es', 'umd'],
      name: pkg.name,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

[ElMassimo]

Try one of the following plugins:

• https://github.com/qmhc/vite-plugin-dts
• https://github.com/alloc/vite-dts

Here's an example library that uses vite-dts.

[KevinGhadyani-Okta]

Are there newer ways that do this? These libraries haven't been updated in a few years, and while that's not a huge deal, I'd prefer a more-supported library; preferably something created by the TypeScript Vite integration.

[trygveaa]

@KevinGhadyani-Okta: https://github.com/qmhc/vite-plugin-dts seems well maintained? It has releases both from January and December.

[KevinGhadyani-Okta]

I ended up keeping with tsc instead. You can separately point at your types in package.json, and TypeScript is able to discern which types are which even if they aren't part of the same bundles.

[sundaycrafts]

Here is a example config.

1. Configure Library mode from the official doc.

2. Add some config to tsconfig.json (see details):

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "dist",
    "emitDeclarationOnly": true,
    "noEmit": false, // make sure to be false to emit d.ts file
    // ...
  },
  "include": ["src/lib.ts"] // (opt) specify your lib's entrypoint otherwise it'll emit all d.ts out of src/*.ts
}

3. Tweak your package.json script entry:

{
  // ...
  "scripts": {
    // execute tsc command after vite build to  to avoid the emmitted d.ts files from being deleted.
    // The last part "npm pack" is recommended if you want to install it as a local library from others by `npm install <generated tgz file path>`.
    "build": "vite build && tsc && npm pack"
  }
}

4. Lastly, make sure your vite.config.js points to the same file as compilerOptions.include in tsconfig.json:

// ...

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/lib.ts"),
      // ...
    },
  },
});