我依照 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()], });
我個人認為更好的方法是使用 vue-tsc:
請參閱https://stackoverflow.com/a/70343443/398287
#您可以使用
#vite-plugin-dts