前端打包:tsup

分享
计算机软件开发 2024-10-8 01:46:15 155 0 来自 中国
使用 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 参数。
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-12-22 18:57, Processed in 0.148079 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表