unplugin-dts
v1.0.0-beta.0TypeScript
<h1 align="center">unplugin-dts</h1>
0/weekUpdated 6 months agoMITUnpacked: 154.3 KB
Published by qmhc
npm install unplugin-dtsunplugin-dts
An unplugin that generates declaration files (*.d.ts) from .ts(x) or .vue source files when using library mode.
Installation
``sh`
pnpm i -D unplugin-dts
Usage
Vite
In vite.config.ts:
`ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'unplugin-dts/vite'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'MyLib',
formats: ['es'],
fileName: 'my-lib',
}
},
plugins: [dts()],
})
`
Rollup
In rollup.config.mjs:
`ts
import { defineConfig } from 'rollup'
import typescript from '@rollup/plugin-typescript'
import dts from 'unplugin-dts/rollup'
export default defineConfig({
input: {
index: './src/index.ts',
},
output: [
{
dir: 'dist',
exports: 'named',
format: 'esm',
},
],
plugins: [typescript(), dts()],
})
`
Rolldown
In rolldown.config.mjs:
`ts
import { defineConfig } from 'rolldown'
import dts from 'unplugin-dts/rolldown'
export default defineConfig({
input: {
index: './src/index.ts',
},
output: [
{
dir: 'dist',
exports: 'named',
format: 'esm',
},
],
plugins: [dts()],
})
`
Webpack
In webpack.config.js:
`ts
import { resolve } from 'node:path'
import dts from 'unplugin-dts/webpack'
export default {
entry: {
index: './src/index.ts',
},
output: {
path: resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [dts()],
}
`
Rspack
In rspack.config.mjs:
`ts
import { resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from '@rspack/cli'
import dts from 'unplugin-dts/rspack'
const rootDir = resolve(fileURLToPath(import.meta.url), '..')
export default defineConfig({
entry: {
index: './src/index.ts',
},
output: {
path: resolve(rootDir, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'ecmascript',
},
},
},
},
],
},
{
test: /\.ts$/,
use: [
{
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
decorators: true,
},
},
},
},
],
},
],
},
plugins: [dts()],
})
`
Esbuild
In your build script:
`ts
import { build } from 'esbuild'
import dts from 'unplugin-dts/esbuild'
await build({
entryPoints: ['src/index.ts'],
format: 'esm',
outdir: 'dist',
bundle: true,
plugins: [dts()],
})
`
By default, the generated declaration files are following the source structure.
Fortunately, with the help of API Extractor, the plugin can bundle all types into a single file. You just need to install @microsoft/api-extractor and set bundleTypes: true:
`sh`
pnpm i -D @microsoft/api-extractor
`ts`
{
plugins: [dts({ bundleTypes: true })]
}
If you start with official Vite template, you should specify the tsconfigPath:
`ts`
{
plugins: [dts({ tsconfigPath: './tsconfig.app.json' })]
}
One more, if you are using it in a Vue project, you need to install @vue/language-core as a peer dependency for the plugin:
`sh``
pnpm i -D @vue/language-core
Example
A real project using this plugin: Vexip UI.
License
MIT License.