Hinzufügen von Typen zu Ihrem Vite-Bibliotheks-Build: eine Schritt-für-Schritt-Anleitung
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()],
});
