Menambah jenis pada binaan pustaka Vite anda: panduan langkah demi langkah

Question

Saya menggunakan corak perpustakaan mengikut dokumentasi vite dan dapat menghasilkan perpustakaan komponen yang berfungsi.

Saya mencipta projek menggunakan pratetap vue-ts dan menentukan prop serta jenisnya dalam komponen saya dan menggunakan beberapa antara muka. Tetapi apabila saya membina perpustakaan, tiada jenis yang disertakan.

Bagaimana untuk menambah jenis pada binaan akhir, sama ada disimpulkan secara automatik daripada komponen atau secara manual menggunakan fail definisi?

Maklumat lanjut Berikut ialah maklumat lanjut tentang fail saya:

tsconfig.json

{
  "name": "@mneelansh/test-lib",
  "private": false,
  "version": "0.0.2",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "emitDeclarationOnly": true, // testing
  "declaration": true, // testing
  "main": "./dist/lib.umd.js",
  "module": "./dist/lib.es.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "@types/node": "^17.0.25",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.5",
    "vue-tsc": "^0.34.7"
  }
}

Saya menambah atribut emitDeclarationOnly 和 declaration tetapi itu tidak membantu.

Sayavite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "Button",
      fileName: (format) => `lib.${format}.js`,
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  plugins: [vue()],
});

Answer 1

Saya secara peribadi berpendapat cara yang lebih baik ialah menggunakan vue-tsc:

vue-tsc --declaration --emitDeclarationOnly

Sila rujuk https://stackoverflow.com/a/70343443/398287

Answer 2

Boleh guna vite-plugin-dts

import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [
    dts({
      insertTypesEntry: true,
    }),
  ],