Reader

Vue 团队“王炸”新作!又一打包工具发布!

| 掘金本周最热 | Default

作者:前端开发爱好者

咱就说,这前端工具链的江湖,本来就已经风起云涌了,结果 Vue 团队这边还没等大家缓过神来,又丢了个 “王炸” ——Tsdown

咱不禁想问,Rolldown 还在那“半途而废”呢,这 Tsdown 又是哪路神仙?莫慌,咱这就来一探究竟!

Tsdown 是个啥玩意儿?

简单来说,Tsdown 就是个专为 TypeScript 项目打造的 “极速打包神器” ,它背后靠的是 Rolldown 这个“硬核引擎”。

图片

这玩意儿厉害就厉害在,它不仅能像火箭一样飞快地把项目打包了,还能顺手给咱生成 .d.ts 类型声明文件,简直是 TypeScript 开发者的“贴心小棉袄”!

它到底牛在哪?

极速构建,快到飞起!

Tsdown 凭借 Rolldown 和 Oxc 这两个“秘密武器”,把打包速度直接拉满了。

和那些老古董工具比起来,它快了 10-30 倍!这就好比别人还在那骑自行车,Tsdown 已经开着超跑绝尘而去了。

TypeScript 优化,开箱即用!

对于咱这些天天和 TypeScript 打交道的开发者来说,Tsdown 简直就是“救星”。

它内置了 unplugin-isolated-decl,能自动给咱生成 .d.ts 文件,这可比手动去写要省心多了。

插件生态丰富,兼容性拉满!

Tsdown 这家伙特别“合群”,RollupViteunplugin 这些插件它都能玩得转,而且还能直接复用 Vite 或 Vitest 的配置。

和其他工具比,它能打吗?

咱来简单对比一下:

  • esbuild:虽然快,但插件生态不够“给力”,Tsdown 在这点上就胜出不少。
  • Rollup:插件系统是强,但速度太慢了,Tsdown 这边速度和生态“两手抓,两手都要硬”。
  • Tsup:适合小项目快速迭代,但一到大项目就“力不从心”了,Tsdown 则是“大场面先生”。

适用场景和最佳实践

  • 前端项目打包:要是你在搞个用 TypeScript 写的中大型前端项目,Tsdown 能让你的构建效率“飞起来”。
  • 库构建:开源库或者框架的开发者有福了,Tsdown 能帮你轻松搞定类型定义和多格式打包。
  • 工具链集成:和 Vite、Vitest 一起用,那感觉就是一个字——“爽”!

如何使用?

咱就说,Tsdown 的使用方法简单到让人怀疑是不是漏掉了什么步骤。

咱直接上干货,手把手教你玩转这个 “打包神器”

第一步:安装

先别慌,确保你的电脑里已经装了 Node.js(这玩意儿是运行 Tsdown 的基础)。装好了?那咱就开始吧!

打开终端,输入下面这行命令,Tsdown 就能“搬回家”了:

npm install tsdown

第二步:配置

Tsdown 需要一个“地图”来知道从哪里开始打包,这个“地图”就是 tsdown.config.ts 文件。

咱在项目根目录下创建一个这个文件,然后写上几行代码:

import { defineConfig } from 'tsdown';

export default defineConfig({
  entry: ['./src'], // 告诉 Tsdown 从哪个文件夹开始打包
  outDir: './dist'// 打包后的文件放哪
  format: ['es''cjs'], // 输出格式,ES 模块和 CommonJS 都要
});

第三步:运行

万事俱备,只差东风了!回到终端,输入下面这行命令,Tsdown 就开始干活了:

npx tsdown

第四步:迁移(可选)

如果你之前用的是 tsupTsdown 还提供了一个“搬家助手”,帮你把旧项目无缝迁移到 Tsdown 上。

只需要运行:

npx tsdown migrate

总结

Tsdown 的使用方法简单到让人怀疑是不是在做梦!

安装配置运行,三步就能搞定一个项目的打包。

而且它还支持迁移,对老项目特别友好。要是你还在用那些“老古董”打包工具,不妨试试 Tsdown,说不定用一次就离不开了!

  • Tsdown 官方文档https://jsr.io/@sxzz/tsdown/doc
  • Tsdown Github 地址https://github.com/rolldown/tsdown