tsup使用基础

what tsup? 其基于 esbuild 驱动，内置了 TypeScript 支持，旨在用于替换 rollup 的，更现代化的，更易于 ts 的打包工具。

配置项

其他具体配置可以看官方文档，这里列举一些项目中常用的配置

// tsup.config.ts
export default defineConfig({
   // ... 配置项
})

指定声明文件

dts?: string | boolean | DtsConfig

指定是否生成声明文件

export default defineConfig({
    dts: true,
})

export default defineConfig({
    resolve: ['axios'] // 指定第三方包名,可以直接把三方包中的类型编译过来
})

指定 ES5

将 target 设置为 es5 即可。

注意：还需要装 swc/code 这个包，否则无法构建成功。

因为 esbuild 无法构建出 es5 代码，所以在构建 es5 的时候作者使用 swc/code来构建

export default defineConfig({
    target: 'es5',
})

构建依赖排除

external?: (string | RegExp)[]

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

export default defineConfig({
    external: ['vue'],
})

treeshake

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

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

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

export default defineConfig({
    treeshake: true,
})

自定义 Esbuild 插件

esbuild插件文档 (opens new window)

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

import { defineConfig } from 'tsup'

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