> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# tsup

本章节介绍如何将使用 tsup 的项目迁移到 Rslib。

## 使用 Agent Skills

如果你在使用支持 Skills 的 Coding Agent，可以安装 [migrate-to-rslib](https://github.com/rstackjs/agent-skills#migrate-to-rslib) 技能来辅助完成迁移流程。


```sh [npx]
npx skills add rstackjs/agent-skills --skill migrate-to-rslib
```

```sh [yarn]
yarn dlx skills add rstackjs/agent-skills --skill migrate-to-rslib
```

```sh [pnpm]
pnpm dlx skills add rstackjs/agent-skills --skill migrate-to-rslib
```

```sh [bunx]
bunx skills add rstackjs/agent-skills --skill migrate-to-rslib
```

```sh [deno]
deno run -A npm:skills add rstackjs/agent-skills --skill migrate-to-rslib
```

安装后，让 Coding Agent 协助完成迁移即可。

## 安装依赖

首先，你需要将 tsup 的 npm 依赖替换为 Rslib 的依赖。

- 移除 tsup:


```sh [npm]
npm remove tsup
```

```sh [yarn]
yarn remove tsup
```

```sh [pnpm]
pnpm remove tsup
```

```sh [bun]
bun remove tsup
```

```sh [deno]
deno remove npm:tsup
```

- 安装 Rslib:


```sh [npm]
npm add @rslib/core -D
```

```sh [yarn]
yarn add @rslib/core -D
```

```sh [pnpm]
pnpm add @rslib/core -D
```

```sh [bun]
bun add @rslib/core -D
```

```sh [deno]
deno add npm:@rslib/core -D
```

## 更新 npm 脚本

接下来，你需要更新 `package.json` 中的 npm 脚本，以使用 Rslib 的 CLI 命令。

```diff title="package.json"
{
  "scripts": {
-   "build": "tsup",
-   "build:watch": "tsup --watch",
+   "build": "rslib",
+   "build:watch": "rslib --watch"
  }
}
```

## 创建配置文件

在 `package.json` 所在的同一目录中创建一个 Rslib 配置文件 `rslib.config.ts`，并添加以下内容：

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';

export default defineConfig({});
```

## 配置迁移

以下是 tsup 配置对应的 Rslib 配置：

| tsup          | Rslib                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| banner        | [lib.banner](/zh/config/lib/banner.md)                                                                                                    |
| bundle        | [lib.bundle](/zh/config/lib/bundle.md)                                                                                                    |
| clean         | [output.cleanDistPath](/zh/config/rsbuild/output.md#outputcleandistpath)                                                                  |
| define        | [source.define](/zh/config/rsbuild/source.md#sourcedefine)                                                                                |
| dts           | [lib.dts](/zh/config/lib/dts.md)                                                                                                          |
| entry         | [source.entry](/zh/config/rsbuild/source.md#sourceentry)                                                                                  |
| external      | [output.externals](/zh/config/rsbuild/output.md#outputexternals) / [output.autoExternal](/zh/config/rsbuild/output.md#outputautoexternal) |
| format        | [lib.format](/zh/config/lib/format.md)                                                                                                    |
| footer        | [lib.footer](/zh/config/lib/footer.md)                                                                                                    |
| minify        | [output.minify](/zh/config/rsbuild/output.md#outputminify)                                                                                |
| platform      | [output.target](/zh/config/rsbuild/output.md#outputtarget)                                                                                |
| plugins       | [plugins](/zh/config/rsbuild/plugins.md)                                                                                                  |
| sourcemap     | [output.sourceMap](/zh/config/rsbuild/output.md#outputsourcemap)                                                                          |
| shims         | [lib.shims](/zh/config/lib/shims.md)                                                                                                      |
| terserOptions | [output.minify](/zh/config/rsbuild/output.md#outputminify)                                                                                |
| tsconfig      | [source.tsconfigPath](/zh/config/rsbuild/source.md#sourcetsconfigpath)                                                                    |

## 示例

以下是一个典型的 `tsup` 配置文件迁移到 Rslib 的示例：

```ts title="tsup.config.ts"
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['./src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  clean: true,
});
```

对应的 Rslib 配置文件如下：

```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    {
      format: 'esm',
      dts: true,
    },
    {
      format: 'cjs',
      dts: true,
    },
  ],
  source: {
    entry: {
      index: './src/index.ts',
    },
  },
  output: {
    cleanDistPath: true,
  },
});
```

## 验证结果

完成以上步骤后，你已经完成了从 tsup 到 Rslib 的基本迁移，此时可以执行 `npm run build` 命令来构建出产物，并验证产物的目录结构与扩展名与迁移前保持一致。

如果在构建过程中发现问题，请根据错误日志进行调试。你也可以开启 [调试模式](/zh/guide/basic/configure-rslib.md#调试模式) 查看 Rslib 生成的最终配置，或者对照 `tsup.config.ts` 检查是否有一些必须的配置未被迁移。

## 内容补充

当前文档仅包含部分迁移过程。如果你发现合适的内容需要添加，请随时通过 pull request 贡献文档 🤝。

> Rslib 的文档位于 [rslib/website](https://github.com/web-infra-dev/rslib/tree/main/website) 目录中。