2024/08/01時点でnpm create vite@latestを使ってVue3, TypeScript環境を構築した際に、.d.tsファイルの生成が出来なかったので、その対処法のメモになります。

Viteで開発環境を構築する

npm create vite@latest

.d.tsファイルを生成する

プラグインのインストール

このまま初期状態でビルドしても.d.tsファイルは生成されないので、以下のプラグインをインストールします。

npm install -D vite-plugin-dts

vite.config.tsの設定

このプラグインを使用することで.d.tsファイルが生成されるはずなのですが、最新バージョンで生成されるtsconfig.jsonの参照が上手くいっておらず.d.tsファイルが生成されなかったので、その対処法になります。

解決方法としては、tsconfig.app.jsonの設定をdtsから参照できるように追記します。

vite.config.tsに以下の設定を追加します。

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// dtsプラグインをインポートします！！！
import dts from 'vite-plugin-dts'


// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      fileName: 'my-lib',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  // ここでdtsプラグインを追加し、参照するtsconfigファイルを指定する必要があります！！！
  plugins: [vue(), dts({tsconfigPath: resolve(__dirname, "tsconfig.app.json")})],
})