Ajout de types à la construction de votre bibliothèque Vite : un guide étape par étape

Question

J'ai utilisé le modèle de bibliothèque selon la documentation rapide et j'ai pu générer une bibliothèque de composants fonctionnelle.

J'ai créé le projet en utilisant le préréglage vue-ts et défini les accessoires et leurs types dans mes composants et utilisé certaines interfaces. Mais lorsque je construis la bibliothèque, aucun type n'est inclus.

Comment ajouter des types à la version finale, qu'ils soient automatiquement déduits des composants ou manuellement à l'aide de fichiers de définition ?

Plus d'informations Voici plus d'informations sur mes fichiers :

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

J'ai ajouté l'attribut emitDeclarationOnly 和 declaration mais cela n'a pas aidé.

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

Personnellement, je pense qu'une meilleure façon est d'utiliser vue-tsc :

vue-tsc --declaration --emitDeclarationOnly

Veuillez vous référer à https://stackoverflow.com/a/70343443/398287

Answer 2

Vous pouvez utiliser vite-plugin-dts

import dts from "vite-plugin-dts";

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