tsup 入门到熟练

MartinYin
3,813 阅读3分钟

前言

为什么要用 tsup？

  1. 构建代码配置很少。

  2. 构建 es5 代码不需要配置 babel ，babel 一堆配置项，挺烦人的。

  3. 构建 typescript 还不需要用装插件，rollup 构建 typescript 项目还需要插件配合。

  4. 构建速度超级快，提升开发体验。

如果你需要开发 es 工具库、cli 工具，那么你可以考虑一下 tsup。

官方文档

怎么用 tsup

tips: 以下内容均为我个人通过谷歌翻译理解而来，读者可以自行阅读官方文档。

去官网瞅瞅怎么用……

1676280299772.png 初始化一个 ts 空项目先，装一下包。

tsup 支持 shell 命令传递参数，也可以在通过配置文件配置参数。还是用配置文件把，写错了也好查。

1676280612682.png

支持的文件格式还挺多的，那就选用 .ts 的配置文件把。不为啥，就为了高端……

在根目录创建 tsup.config.ts

import { defineConfig } from 'tsup' // 使用 defineConfig 有类型提示！

export default defineConfig({
  entry: ['src/index.ts'],
  splitting: false,
  sourcemap: true,
  clean: true,
})


// src/index.ts
export async function testBuild() {
    return await resloveBoolean();
}

function resloveBoolean() {
    return new Promise((reslove) => {
        reslove(true)
    })
}

那么执行下 tsup 看看效果。

在 dist 目录下面生成 index.js index.js.map index.d.ts。

1676643954384.png

相比 rollup 构建还要配置插件来着相比舒服挺多的了。

其余的配置项读者可以自行阅读官网文档，这里我列举几个比较有趣的配置。

值得关注的配置项

生成声明文件

export default defineConfig({
    dts: true,
})

dts 它不仅仅是布尔类型，还可以接收字符串和数组，可以指定生成指定文件的 .d.ts

1676644984302.png

-dts-resolve 这个配置可就有意思了，直接上代码

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ['src/index.ts'],
  splitting: false,
  sourcemap: true,
  clean: true,
  // 新增
  dts: {  
    resolve: ['axios'] // 指定第三方包名
  },
})

// src/index.ts
import { AxiosHeaders } from "axios"

export async function testBuild(): Promise<boolean | AxiosHeaders> {
    return await resloveBoolean() as any;
}

function resloveBoolean() {
    return new Promise((reslove) => {
        reslove(true)
    })
}

1676645047959.png

我滴个神呐……直接把 AxiosHeaders 类型编译了过来。🐂🍺🍺

es5

es5 呢？es5 呢？es5 呢？

1676645337428.png

如果想要输出 es5 代码，只需要将 target 设置为 es5 即可。

但是你还需要装 swc/code 这个包，否则无法构建成功。

因为 esbuild 无法构建出 es5 代码，所以在构建 es5 的时候作者使用 swc/code来构建。(具体细节在源码解析文章会讲到)

1676645337428.png

构建排除

tsup 默认会排除 package.json 中 dependencies peerDependencies依赖包，可以使用 --external 将其他的包排除，有趣的是这个配置可以传路径。

Tree shaking

配置下 treeshake 即可开启。

export default defineConfig({
    treeshake: true,
})

tsup 的 tree shaking 是需要手动开启的，其实 rollup 的 tree shaking也是需要手动开启(tsup 用 rollup 做的 tree shaking)，为什么不自动开启，这样还能让代码体积更小。

因为自动开启后会将代码中没有用到的代码过滤掉。可工具不是智能的，它并不知道你这段代码"到底"有没有用。

webpack开启 tree shaking 的时候还会出现第三方包代码摇不掉的情况，webpack 还需要判断第三方包 package.json 是否有 sideEffects字段！

不如把主动权交给开发者，由开发者来决定是否冒这个险，坏人开发者来做！

自定义 Esbuild 插件

esbuild插件文档

tsup 内部使用了 esbuild，当 esbuild 构建不满足你的需求，你可以开发自己的 esbuild 插件。

import { defineConfig } from 'tsup'

export default defineConfig({
  esbuildPlugins: [YourPlugin],
  esbuildOptions(options, context) {
    options.define.foo = '"bar"'
  },
})

完结

tsup 整体配置还是挺简单的，我感觉还是适合用来做 sdk es包 cli 工具这种不涉及到 dom的构建，涉及 dom 的我也没试过……

如果读者对 tsup 感兴趣的话，不妨加个关注，接下来将为大家带来 tsup 源码解析的文章。

本章代码

avatar
文章
阅读
粉丝