我正在尝试使用Vite发布一个Vue 3组件库。 我使用Typescript编写了它。 然而,我遇到了一个问题,即我的类型定义没有被传递到包中。
在另一个项目中导入组件时,我遇到了以下问题:
我知道我需要提供一个声明文件,但是我想知道如何在Vite和Vue 3中具体实现...
我的
构建过程的输出结果位于 dist 文件夹中:
在另一个项目中导入组件时,我遇到了以下问题:
Try `npm i --save-dev @types/repo__mypackagename` if it exists or add a new declaration (.d.ts) file containing `declare module '@repo/mypackagename';
我知道我需要提供一个声明文件,但是我想知道如何在Vite和Vue 3中具体实现...
我的
package.json
文件的有用部分:{
...
"files": [
"dist"
],
"main": "./dist/celestia-vue.umd.js",
"module": "./dist/celestia-vue.es.js",
"exports": {
".": {
"import": "./dist/celestia-vue.es.js",
"require": "./dist/celestia-vue.umd.js"
}
},
"unpkg": "./dist/celestia-vue.umd.js",
"jsdelivr": "./dist/celestia-vue.umd.js",
"scripts": {
"vite:dev": "vite",
"serve": "vue-cli-service serve",
"vite:serve": "vite preview",
"build": "vue-cli-service build",
"vite:build": "vue-tsc --noEmit && vite build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
...
}
我的 tsconfig.json
:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": [
"es6",
"esnext",
"es2016",
"dom",
"dom.iterable",
"scripthost"
],
"allowJs": true,
"declaration": true,
"sourceMap": false,
"outDir": "dist",
"rootDir": "",
"importHelpers": true,
"strict": true,
"noImplicitAny": true,
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"types": [
"webpack-env",
"jest"
],
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"dist",
"test"
]
}
我还有以下vite.config.ts
文件:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript';
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
{
...typescript({ tsconfig: './tsconfig.json' }),
apply: 'build',
declaration: true,
declarationDir: 'types/',
rootDir: '/'
},
vue()
],
resolve: {
alias: {
'@': resolve(__dirname, '/src'),
},
},
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'celestia-vue',
},
rollupOptions: {
external: ['vue'],
output: {
sourcemap: false,
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue'
}
}
}
}
})
构建过程的输出结果位于 dist 文件夹中:
我希望有些简单的东西我可能会错过...也许在vite.config.ts
文件中,或者在我的代码其他地方。
注:如果有帮助,我的Vue 3组件库的组织如下:
TS2305: 模块“"@observerly/celestia-vue"”没有导出成员“CelestiaSkyViewer”。
你知道我应该去哪里修复它吗? - Micheal J. Roberts"types": "./dist/src/types/index.d.ts",
- Micheal J. Roberts