unplugin-dts多构建工具支持：Vite、Rollup、Webpack、Rspack配置指南

unplugin-dts多构建工具支持：Vite、Rollup、Webpack、Rspack配置指南

【免费下载链接】unplugin-dtsAn unplugin for generating declaration (dts) files.项目地址: https://gitcode.com/gh_mirrors/vi/unplugin-dts

unplugin-dts是一款强大的TypeScript声明文件生成工具，它为现代前端构建工具提供了无缝集成的能力。本文将详细介绍如何在Vite、Rollup、Webpack和Rspack等主流构建工具中配置unplugin-dts，帮助开发者轻松生成高质量的TypeScript声明文件。

为什么选择unplugin-dts？

在现代前端开发中，TypeScript已经成为事实上的标准。为你的库或应用生成准确的声明文件（.d.ts）不仅能提升开发体验，还能帮助使用者更好地理解API。unplugin-dts作为一款基于unplugin架构的工具，具有以下优势：

• 多构建工具支持：一次编写，到处运行，支持Vite、Rollup、Webpack、Rspack等多种构建工具
• 高度可配置：提供丰富的配置选项，满足不同项目的需求
• 智能分析：能够智能分析你的代码结构，生成准确的类型声明
• 性能优化：优化的生成过程，不会显著增加构建时间

安装unplugin-dts

在开始配置之前，首先需要安装unplugin-dts。使用npm或yarn：

npm install unplugin-dts --save-dev # 或者 yarn add unplugin-dts --dev

如果你使用pnpm：

pnpm add unplugin-dts -D

Vite配置指南

Vite是近年来非常流行的前端构建工具，以其快速的开发体验而闻名。unplugin-dts为Vite提供了专门的集成方案。

基本配置

在你的vite.config.ts中添加以下配置：

import { defineConfig } from 'vite' import dts from 'unplugin-dts/vite' export default defineConfig({ plugins: [ dts({ // 配置选项 outDirs: ['dist', 'types'], exclude: ['src/ignore'], staticImport: true, compilerOptions: { declarationMap: true, }, }), ], })

完整示例

你可以参考项目中的示例配置：examples/ts-vite/vite.config.ts

Rollup配置指南

Rollup是一款专注于JavaScript模块打包的工具，非常适合构建库。unplugin-dts同样提供了对Rollup的良好支持。

基本配置

在你的rollup.config.mjs中添加以下配置：

import { defineConfig } from 'rollup' import dts from 'unplugin-dts/rollup' export default defineConfig({ plugins: [ dts({ // 配置选项 outDirs: ['dist', 'types'], exclude: ['src/ignore'], staticImport: true, compilerOptions: { declarationMap: true, }, }), ], })

完整示例

项目中的Rollup示例配置可以参考：examples/ts-rollup/rollup.config.mjs

Webpack配置指南

Webpack是目前使用最广泛的前端构建工具之一，生态系统非常丰富。unplugin-dts提供了专门的Webpack插件。

基本配置

在你的webpack.config.ts中添加以下配置：

import dts from 'unplugin-dts/webpack' export default { plugins: [ dts({ // 配置选项 outDirs: ['dist', 'types'], exclude: ['src/ignore'], staticImport: true, compilerOptions: { declarationMap: true, }, }), ], }

完整示例

项目中的Webpack示例配置可以参考：examples/ts-webpack/webpack.config.ts

Rspack配置指南

Rspack是一款新兴的构建工具，旨在提供比Webpack更快的构建速度。unplugin-dts也对Rspack提供了支持。

基本配置

在你的rspack.config.mjs中添加以下配置：

import dts from 'unplugin-dts/rspack' export default { plugins: [ dts({ // 配置选项 outDirs: ['dist', 'types'], exclude: ['src/ignore'], staticImport: true, compilerOptions: { declarationMap: true, }, }), ], }

核心配置选项详解

无论你使用哪种构建工具，unplugin-dts都提供了一系列核心配置选项，让你可以根据项目需求进行定制：

outDirs

指定声明文件的输出目录。可以是一个字符串或字符串数组。

dts({ outDirs: ['dist', 'types'] // 将声明文件输出到dist和types目录 })

include/exclude

控制哪些文件应该被处理或排除。

dts({ include: ['src/index.ts'], // 只处理src/index.ts exclude: ['src/ignore'] // 排除src/ignore目录 })

staticImport

是否将动态导入转换为静态导入。对于某些库来说，这有助于生成更准确的类型声明。

dts({ staticImport: true })

compilerOptions

传递给TypeScript编译器的选项。

dts({ compilerOptions: { declarationMap: true, // 生成声明映射文件 strict: true // 启用严格模式 } })

常见问题解决

声明文件不生成怎么办？

如果遇到声明文件不生成的问题，可以尝试以下解决方法：

1. 检查是否正确安装了unplugin-dts
2. 确认配置中的include选项是否包含了你的入口文件
3. 检查是否有语法错误导致TypeScript编译失败
4. 尝试删除node_modules并重新安装依赖

如何只生成声明文件而不编译代码？

如果你只需要生成声明文件，可以使用declarationOnly选项：

dts({ declarationOnly: true })

总结

unplugin-dts为各种主流构建工具提供了一致且强大的TypeScript声明文件生成能力。无论你使用Vite、Rollup、Webpack还是Rspack，都可以轻松集成unplugin-dts，为你的项目生成高质量的类型声明。

通过本文介绍的配置方法，你可以快速上手unplugin-dts，并根据项目需求进行定制。更多高级用法和配置选项，请参考官方文档：docs/options.md

希望本文对你有所帮助，祝你的TypeScript开发之旅更加顺畅！🚀

【免费下载链接】unplugin-dtsAn unplugin for generating declaration (dts) files.项目地址: https://gitcode.com/gh_mirrors/vi/unplugin-dts