使用 Vite、Vue 3 和 Typescript 将组件库发布到 npm

Question

我正在尝试使用 Vite 发布 Vue 3 组件库。我是用 Typescript 写的。但是，我运行遇到了一个问题，即我的类型定义没有被传递到包中。

在另一个项目中导入组件时，我看到以下问题：

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 文件中，或者在我的代码中的其他地方。

N.B。如果有帮助，我的Vue 3组件库组织如下：

Answer 1

https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#including-declarations-in-your-npm-package

您是否尝试过添加“类型”属性？我可以看到您的 dist 文件夹包含 main.d.ts 文件，因此只需让它被识别即可（通过添加属性)

使用 Vite、Vue 3 和 Typescript 将组件库发布到 npm

Publishing a component library with Vite, Vue 3 and Typescript to npm

npm

typescript

vue.js

vuejs3

vite