我按照 vite 文档使用库模式,并且能够生成一个工作组件库。
我使用 vue-ts 预设创建了项目,并在我的组件中定义了道具及其类型,并使用了一些接口。但是当我构建库时,没有包含任何类型。
如何为最终构建添加类型,无论是自动从组件推断还是使用定义文件手动推断?
更多信息 以下是有关我的文件的更多信息:
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"
}
}
我添加了 emitDeclarationOnly 和 declaration 属性,但这没有帮助。
我的vite.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()],
});
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我个人认为更好的方法是使用 vue-tsc:
请参阅https://stackoverflow.com/a/70343443/398287
您可以使用
vite-plugin-dtsimport dts from "vite-plugin-dts"; export default defineConfig({ plugins: [ dts({ insertTypesEntry: true, }), ],