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

Posted 2023-02-22

【中文标题】使用 Vite、Vue 3 和 Typescript 将组件库发布到 npm

【英文标题】：Publishing a component library with Vite, Vue 3 and Typescript to npm

【发布时间】：2021-10-30 17:57:53

【问题描述】：

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

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

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 组件库的组织如下：

【参考方案1】：

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

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

【讨论】：

感谢您的帮助！这解决了该特定问题。但是，我看到一个新错误 - TS2305: Module '"@observerly/celestia-vue"' has no exported member 'CelestiaSkyViewer'. 你知道我应该去哪里解决这个问题吗？

我看到您实际上有两个 .d.ts 文件 - main.d.ts（如果您正在编写 spa，您将使用 main.ts 应用程序）和 index.d.ts可能是您的库的入口点。您在 types 属性中使用的是 index.d.ts 还是 main.d.ts？

如果我沿着链向上，我的构建过程不是构建 .vue 组件文件...？

事实上，我已经添加了以下作为我的类型："types": "./dist/src/types/index.d.ts",