前端打包：tsup

计算机软件开发 · 2024-10-8 01:46:15

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

使用

安装

npm i tsup -D设置文件

设置比力简朴，看一下官方文档根本上就可以直接上手使用
现在支持了如下几种设置文件范例
tsup.config.tstsup.config.jstsup.config.cjstsup.config.jsonimport 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 参数。

前端打包：tsup

所属分类: 问答交流

新帖推荐: 30日

推荐作品