原文链接：Create Your New Modern TypeScript/JavaScript Library With tsup，2022.11.15，by Christopher T.

导读：tsup 是基于 esbuild 开发的一个新型打包工具（比 rollup 还新）。内置了 TypeScript 支持，零配置、开箱即用，帮助你高效创建现代 TypeScript/JavaScript 库。

现在是作为开发者的最好的时候，尤其对 JavaScript 开发者来说。JavaScript 生态系统庞大而充满惊喜，开源项目不断演进，一个又一个创新工具涌现。有像 React 这样用于开发复杂的用户界面的库、像 Next 这样用于构建服务器端渲染应用程序的框架、像 Gatsby 这样用于构建静态网站的程序，还有 Lerna 和 Turborepo 这种构建多包仓库（monorepo）的工具等等。

提交错误修复或提出新想法的 Pull Request 通常是开发者参与开源项目时首先想到的。我们还可以选择开发自己的开源项目。如果你计划写自己的 JavaScript 开源库，本文就比较适合你。对于那些好奇但没有听说过 tsup（一款替代流行 rollup 的、现代的、强大且健壮的 JavaScript 工具） 的人来说，我们将介绍如何使用它创建自己的 JavaScript 库，并将其提交到 npm 中央仓库（npm registry）供其他人安装使用。我们的示例代码使用 TypeScript 编写（ TypeScript 是 JavaScript 的一个超集）。

tsup 由 esbuild 驱动。esbuild 是一个非常快速、现代化且无需缓存即可实现极速打包功能的 JavaScript 打包器 。esbuild 无需配置就能打包 TypeScript 库的工具，可以打包任何受到 Node.js 平台支持的文件，包括 .js、.json、.mjs、.ts、.tsx，在本文撰写时 esbuild 也实验性地支持 .css 文件的打包。

项目初始化

开始介绍前，先启动一个终端并创建一个新目录（可以随意命名）。然后在终端中输入 cd 进入该目录。本文我们使用目录名 my-typescript-library。

mkdir my-typescript-library cd my-typescript-library

我们需要一个 package.json 文件，所以请在终端中输入 npm init -y。

npm init -y

这将立即使用默认设置为我们创建一个 package.json 文件。

创建一个名为 src 的目录，然后在该目录中创建一个名为 index.ts 的新文件。这个文件是我们库的入口点。

由于要使用 tsup，所以将它作为开发依赖安装：

npm i -D tsup

由于我们在 src/index.ts 中创建的文件将成为我们库的入口点，因此我们需要指示 tsup 消费这些文件并将其输出到某个位置（我们将设置输出目录为 ./dist）。

继续修改 package.json，在 scripts 属性下添加 build 和 start 脚本：

现在当我们运行 npm run build 时，tsup 编译器会使用 src/index.ts 并自动编译文件到 ./dist 目录中：

下面是目录结构

默认情况下，tsup 将打包文件输出到 ./dist 目录，不过我们可以通过配置文件进行配置，这块我们后面会详细介绍。

如果我们查看生成的文件 ./dist/index.js，会发现内容为空。这是因为我们还没有为库编写任何代码。

添加功能代码

让我们输入一些基本代码，以便更详细地分析输出结果：

src/index.ts：

再次运行 npm run build，并注意 tsup 是如何将我们的代码转译为 ES5 的：

让我们通过创建一个名为 client.js 的文件来测试我们的库，包含以下代码：

在终端中输入 node client.js 运行文件，你会看到：

很好！我们的库到目前运行得非常顺利。