如何生成ts,tsx,vue,svelte,astro,vine.ts等模版的d.ts文件?用undts

98 阅读2分钟

撰于2024年12月14日。

目前,似乎前端社区内很少有方便好用的.d.ts生成工具,于是便动手做了一个。目前支持的有:

话不多说,先放仓库地址:

github unbuilderjs/undts

安装它也很简单:

pnpm i undts

秉着一切从简的原则,我想要做一个既强大,又易用的.d.ts生成工具,所以如果轻度使用,配置项会变得和tsup@antfu/eslint-config那样简单到爆炸💥~

在你的项目根目录中创建一个build.js(或者你用ts然后用tsx/ts-node等的工具来跑也行):

import { build } from "undts";

build({
  // 这里放你的程序入口点,就像`tsup`那样,但是只能是一个数组
  entry: [
    "./src/index.ts",
  ],
  
  // 默认情况下,所有模版编译都是开启的,选项取决于你
  // 比如你正在开发vue组件库,你可以把其他的都关了,如下:
  astro: false,
  svelte: false,
  vine: false,
  
  // 你可以自定义alias和resolve选项,这样你就可以在你的项目中
  // 使用别名之类的,扔掉../../../这种超长的路径导入
  alias: {},
  resolve: {},
})

还有一些高级的选项,可以参考jsdoc提示得知,也是非常的简单。

理论上来讲,一般的项目只需要定义entry选项,还有开关这些模版编译的开关就行,你就说是不是方便到爆炸吧。

原理

很简单粗暴,没有考虑性能,只考虑了生成的结果是不是最令人满意的:

启动一个tsc服务器 - 内置转换插件转换(vue啊svelte啊等等) - rollup + rollup-plugin-dts打包到一起

大致的原理就是这样。将这个工具与tsup等工具结合使用,会更加爽歪歪的😋