0%

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

代码

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

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

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

1
2
3
4
5
{
"script": {
"build": "vite build && tsc -p ./tsconfig.dist.json -emitDeclarationOnly && tsc-alias -p ./tsconfig.dist.json"
}
}

说明

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

先说这行命令

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

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

1
2
3
4
{
"extends": "./tsconfig.json",
"include": ["src"]
}

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

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

现在我们来看第二条命令

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

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

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

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