TypeScript 项目打包发布到 npm，如何给方法和接口添加 dts

This topic created in 579 days ago, the information mentioned may be changed or developed.

最近写了一个库发布到了 npm 源码使用的 TypeScript 开发的，然后用了 vite 进行打包，现在我已经发布到 npm 上面了但是在使用的时候引入包的时候会出现 ts 的错误，因为打包之后没有 dts 文件不知道要怎么给打包到 npm 的包添加需要暴露的 dts 文件这个是 npm 的包地址： https://www.npmjs.com/package/liteofd 下面是我在 demo 项目里面引入的报错

import { LiteOfd, OfdDocument } from 'liteofd'

Could not find a declaration file for module 'liteofd'. 'node_modules/liteofd/dist/liteofd.es.js' implicitly has an 'any' type.
  There are types at 'node_modules/liteofd/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'liteofd' library may need to update its package.json or typings.

下面的图是打包发布到 npm 上面的结构结构 1 结构 2 我在网上也查询了，但是因为不是前端开发，所以一直没弄好如何给这个项目添加 dts 希望熟悉 TypeScript 的各位帮帮忙帮我看看我要怎么改项目添加 dts 文件让用户引用包不会报错 ps:dts-gen 我也安装并按照网上的使用还是不行，就报错说 module 的问题

TypeScript

dts

npm

13 replies • 2024-10-24 00:01:41 +08:00

zcf0508

Oct 22, 2024

vite 构建需要引入 vite-plugin-dts ，可以参考下这个

https://github.com/zcf0508/blocknote-vue/blob/main/vite.config.ts#L33

zbinlin

Oct 22, 2024

在 package.json 里加上 types 字段

sparkinglemon

Oct 22, 2024

```json
{
...
"types": "./dist/index.d.ts",
"exports": {
".": {
"require": "./dist/index.cjs",
"import": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
...
}
```

根据你最后具体的打包结果修改

xxss0903

Oct 22, 2024

@sparkinglemon 请问下这个是加到 package.json 里面吗

sparkinglemon

Oct 22, 2024

@xxss0903 是，你看一下你 build 之后对应的.d.ts 文件在哪，报错提示里写的 “There are types at 'node_modules/liteofd/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports".”

subframe75361

Oct 22, 2024

自己总结的： https://juejin.cn/post/7254836247290052663

省流：tsup

xxss0903

Oct 22, 2024

@sparkinglemon 意思是要根据 index.d.ts 的位置来配置 package.json 中的 export 的内容吗

xxss0903

Oct 22, 2024

@subframe75361 是用 tsup 进行打包吗，我没用过这个，这就去试试

CLMan

Oct 23, 2024

vite 是开发 web 应用的脚手架，你只是开发模块/库，如果不需要使用 web 页面进行辅助开发和测试，是不需要上 vite 的。

当然上了也不是什么错，毕竟可以利用其默认配置，比如 eslint 、prettier 相关默认设置。但是需要额外的配置，因为 vite 是面向 web 应用设计的，你用来开发库，其构建目标就和默认情况发生偏差，你需要添加额外的构建配置。

前面楼层提到的 package.json 里面的`exports`,`import`,`types`等字段，应该由构建工具来修改，不建议手动修改。

ESM 现在是主流的模块解决方案，webpack 这样的旧时代构建工具很少被使用了，构建工具有 rollup ，也包括前面提到的 tsup ，vite 是基于 rollup 的，所以你没必要引入额外的构建工具，当然你硬要用 tsup 也不会存在什么问题，只是 rollup 与 vite 集成度更高而已。

如过你使用 rollup ，就需要添加 rollup 的相关配置来构件库。你需要阅读 rollup 官网文档，以及 vite 官网的 rollup 部分的文档，了解如何添加构建库的配置。

这就是你这问题的相关解决思路。

CLMan

Oct 23, 2024

@CLMan 之前没看你项目源码，看了下，引入 vite-plugin-dts 是正确答案。

xxss0903

Oct 23, 2024

@CLMan 我现在成功打包了 index.cjs ，也能正常的创建了 index.d.ts 来进行类型的引用
但是又发现另外一个问题，就是我的库使用了一些字体文件，就是静态资源放在了 assets 里面
然后我写了一个 vue 的 demo 项目通过 package.json 引入这个库，其中的类和方法能够使用了，但是 assets 中的字体没有被引用到，我打开开发者工具里面查看 sources 里面，发现引用的源码在.vite/deps 里面，有一个 liteofd.js 的代码是我项目里面用到的，但是却没有 assets 中的字体文件
但是在 node_modules 里面的 liteofd 库里面是有 assets 和字体文件的

CLMan

Oct 23, 2024

@xxss0903 你这涉及到字体等资源文件了，我只用 TypeScript 写过传统的逻辑库和 web 应用，没写过 web 组件库。

你可以参考与你项目类似的 pdf.js： https://www.npmjs.com/package/pdfjs-dist ，看它是怎么打包资源文件的。

xxss0903

Oct 24, 2024

@CLMan 好的，谢谢