前端打包：tsup

前端

使用 tsup 的目的是为了快速的打包 TS 项目，使用 tsup 基于 esbuild 进行构建，打包 ts 文件速度是 tsc 的 100 多倍

使用

安装
1
npm i tsup -D
配置文件

配置比较简单，看一下官方文档基本上就可以直接上手使用

目前支持了如下几种配置文件类型

1
2
3
4
tsup.config.ts
tsup.config.js
tsup.config.cjs
tsup.config.json
1
2
3
4
5
6
7
8
9
import type { Options } from "tsup";

export const tsup: Options = {
  entry: ["src/*.ts"],
  format: ["cjs", "esm"],
  dts: true,
  splitting: true,
  clean: true,
};
直接通过 script 脚本运行
1
2
3
4
"script": {
     "build": "tsup",
     "dev": "tsup --watch"
 }

在 dev 的情况下你可以进行打包并监听文件的改变进行打包，这样就可以快速看到效果了
如果需要打包多入口文件只需要这样：

1
tsup src/index.ts src/cli.ts

或者 src 下的所有 ts 文件作为打包入口

1
tsup src/*.ts

出口默认是 dist 文件夹，并且默认是符合 commonJS 的 cjs 格式，只需要通过 format 参数指定即可打包出 cjs,esm,iife 格式的文件，iife 比较适合浏览器通过