前端打包：tsup

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

使用

安装

npm i tsup -D

配置文件

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

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

tsup.config.ts
tsup.config.js
tsup.config.cjs
tsup.config.json

import type { Options } from "tsup";

export const tsup: Options = {
  entry: ["src/*.ts"],
  format: ["cjs", "esm"],
  dts: true,
  splitting: true,
  clean: true,
};

直接通过 script 脚本运行

"script": {
     "build": "tsup",
     "dev": "tsup --watch"
 }

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

tsup src/index.ts src/cli.ts

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

tsup src/*.ts

出口默认是 dist 文件夹，并且默认是符合 commonJS 的 cjs 格式，只需要通过 format 参数指定即可打包出 cjs,esm,iife 格式的文件，iife 比较适合浏览器通过<script>标签引入，如果没这个需求通常只需要打包出 cjs 和 esm 即可。

• 这样打包出来的 js 文件并不会附带类型定义文件，如果需要带上类型定义文件只需要在打包命令加上：--dts 参数即可。
• 如果打包时需要清除上一次的打包需要使用：--clean 参数。
• 默认情况下打包 esm 会进行代码分割，但是 cjs 并不默认支持，如果需要启用 cjs 代码分割需要加上：--splitting 参数。