Hinzufügen von Typen zu Ihrem Vite-Bibliotheks-Build: eine Schritt-für-Schritt-Anleitung

Question

Ich habe das Bibliotheksmuster gemäß der Vite-Dokumentation verwendet und konnte eine funktionierende Komponentenbibliothek generieren.

Ich habe das Projekt mit der Voreinstellung vue-ts erstellt, die Requisiten und ihre Typen in meinen Komponenten definiert und einige Schnittstellen verwendet. Aber wenn ich die Bibliothek erstelle, sind keine Typen enthalten.

Wie füge ich Typen zum endgültigen Build hinzu, ob automatisch aus Komponenten abgeleitet oder manuell mithilfe von Definitionsdateien?

Weitere Informationen Hier finden Sie weitere Informationen zu meinen Dateien:

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"
  }
}

Ich habe das Attribut emitDeclarationOnly 和 declaration hinzugefügt, aber das hat nicht geholfen.

Meinvite.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

我个人认为更好的方法是使用 vue-tsc：

vue-tsc --declaration --emitDeclarationOnly

请参阅https://stackoverflow.com/a/70343443/398287

Answer 2

您可以使用vite-plugin-dts

import dts from "vite-plugin-dts";

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