Как собрать библиотеку с typescript и типами на Vite?

Question

[Дмитрий Путилов]

Всем привет ,начал изучать сборку библиотек на vite и столкунлся с проблемой. Если я собираю библиотеку на vite без типов ,а просто сборка на js, он нормально собирает в js файлы, а как сделать так, что бы он собирал с типами, которые я смогу в дальнейшем использовать?

Вот как на данный момент я собираю библиотеку в js

package.json

{
  "name": "brepex",
  "files": [
    "dist"
  ],
  "main": "./dist/brepex.umd.cjs",
  "module": "./dist/brepex.js",
  "exports": {
    ".": {
      "import": "./dist/brepex.js"
    }
  },
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Вот мой tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Вот мой vite.config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  build: {
    write: true,
    lib: {
      entry: "./src/index.ts",
      name: "brepex",
      formats: ['es']
    },
    rollupOptions: {
      external: ['react'],
      output: {
        format: "esm",
        globals: {
          react: "react"
        }
      }
    }
  }
})

Вот как сейчас выглядит архитектура, там просто обычный файл Button.tsx

И сейчас он собирает в .js, а как сделать что бы он собирал с типаами, что бы можно было использовать в ts тоже?

Comments

[Александр]

Попробуйте https://github.com/qmhc/vite-plugin-dts.

[Faershtein]

полностью библиотеку на vite собрать не получиться. Попробуй использовать https://tsdx.io/api-reference#tsdx-test
https://www.youtube.com/watch?v=aCQHUiFFd1k

Answer 1

[Пес Барбос]

Нужно в tsconfig прописать

{
compilerOptions: {
  ...,
  "declaration": true,
  ...
  }
}

https://www.typescriptlang.org/tsconfig#declaration