打包项目时如何一并输出d.ts文件？

代码

不管你用 webpack 还是 vite 打包，或者其他的构建工具。下面代码是通用的

$ tsc -p ./tsconfig.dist.json -emitDeclarationOnly && tsc-alias -p ./tsconfig.dist.json

只需要将上述代码添加到 package.json 的 build 命令中即可

如

{
  "script": {
    "build": "vite build && tsc -p ./tsconfig.dist.json -emitDeclarationOnly && tsc-alias -p ./tsconfig.dist.json"
  }
}

说明

tsc 这个是 typescript 的 cli 工具， 安装完 typescript 后就会有。

先说这行命令

tsc -p ./tsconfig.dist.json -emitDeclarationOnly

其中的 -p 参数的全写是--project该参数用于指定，使用哪个文件配置 typescript 的编译，默认是tsconfig.json，但是这里我们需要区分下生产和开发环境，所以单独建立了typescript.dist.json文件，其内容如下

{
  "extends": "./tsconfig.json",
  "include": ["src"]
}

你可以简单理解为，该文件相当于Object.assign()方法，用于将该文件的include选项覆盖掉./tsconfig.json文件，从而形成一个新的配置文件.

-emitDeclarationOnly 参数意思是只输出 定义文件， 也就是 d.ts 文件。

现在我们来看第二条命令

tsc-alias -p ./tsconfig.dist.json

这条命令的 tsc-alias 用于处理 typescript 编译后的 alias 路径问题，比如在 vue 项目中，我们常使用@关键字来代替src目录，比如引用 type 时会这样写

import type { TItem } from "@/index.ts";

通过tsc-alias命令可以将这个@关键字替换为相对路径，从而避免打包出来的插件，alias 丢失问题