基于 Rollup 的零配置打包工具 tsup 安装配置和使用详解

15 min read

tsup 是基于 Rollup 的零配置打包工具，它可以帮助我们将 TypeScript 项目打包成浏览器端可用的代码，支持 Tree Shaking、ES Modules、CommonJS 和 UMD 等多种输出格式。

下面我们来介绍如何安装配置和使用 tsup。

安装 tsup

我们可以使用 npm 来安装 tsup：

npm install -g tsup

安装完成后，我们可以通过 tsup --help 命令来查看 tsup 的使用帮助信息。

配置 tsup

tsup 的默认配置已经足够大部分场景使用，如果需要更改配置，可以在项目根目录创建 tsup.config.js 文件进行修改。

以下是一个简单的 tsup.config.js 配置文件示例：

module.exports = {
  entryPoints: ['src/index.ts'],
  format: ['cjs', 'esm', 'umd'],
  outfile: 'dist/my-library.min.js',
  minify: true,
  sourcemap: true,
};

上述配置文件用于将 src/index.ts 文件打包成 dist/my-library.min.js 文件，同时输出 CommonJS、ES Module 和 UMD 格式的代码，并启用代码压缩和生成 sourcemap。

entryPoints

entryPoints 表示入口文件，通常为一个或多个 TypeScript 文件（比如示例中的 src/index.ts）。

format

format 表示打包输出格式，可以指定多种格式。以下是可选的格式：

  • cjs - CommonJS
  • esm - ES Module
  • umd - Universal Module Definition

outfile

outfile 表示打包输出路径和文件名。

minify

minify 表示是否启用代码压缩。

sourcemap

sourcemap 表示是否生成 sourcemap。

使用 tsup

使用 tsup 构建项目非常简单，只需在项目根目录运行下面的命令即可：

tsup

默认情况下，tsup 会自动查找项目根目录下的 tsup.config.js 文件，并使用其中的配置进行打包。如果你需要在命令行中指定配置，也可以使用 -c 参数，例如：

tsup -c tsup.config.dev.js

上述命令将使用 tsup.config.dev.js 作为打包的配置文件。

执行完命令后，打包生成的文件就会出现在 dist 目录下。