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

導(dǎo)讀：tsup 是基于 esbuild 開發(fā)的一個(gè)新型打包工具（比 rollup 還新）。內(nèi)置了 TypeScript 支持，零配置、開箱即用，幫助你高效創(chuàng)建現(xiàn)代 TypeScript/JavaScript 庫(kù)。

現(xiàn)在是作為開發(fā)者的最好的時(shí)候，尤其對(duì) JavaScript 開發(fā)者來(lái)說(shuō)。JavaScript 生態(tài)系統(tǒng)龐大而充滿驚喜，開源項(xiàng)目不斷演進(jìn)，一個(gè)又一個(gè)創(chuàng)新工具涌現(xiàn)。有像 React 這樣用于開發(fā)復(fù)雜的用戶界面的庫(kù)、像 Next 這樣用于構(gòu)建服務(wù)器端渲染應(yīng)用程序的框架、像 Gatsby 這樣用于構(gòu)建靜態(tài)網(wǎng)站的程序，還有 Lerna 和 Turborepo 這種構(gòu)建多包倉(cāng)庫(kù)（monorepo）的工具等等。

提交錯(cuò)誤修復(fù)或提出新想法的 Pull Request 通常是開發(fā)者參與開源項(xiàng)目時(shí)首先想到的。我們還可以選擇開發(fā)自己的開源項(xiàng)目。如果你計(jì)劃寫自己的 JavaScript 開源庫(kù)，本文就比較適合你。對(duì)于那些好奇但沒(méi)有聽說(shuō)過(guò) tsup（一款替代流行 rollup 的、現(xiàn)代的、強(qiáng)大且健壯的 JavaScript 工具） 的人來(lái)說(shuō)，我們將介紹如何使用它創(chuàng)建自己的 JavaScript 庫(kù)，并將其提交到 npm 中央倉(cāng)庫(kù)（npm registry）供其他人安裝使用。我們的示例代碼使用 TypeScript 編寫（ TypeScript 是 JavaScript 的一個(gè)超集）。

tsup 由 esbuild 驅(qū)動(dòng)。esbuild 是一個(gè)非常快速、現(xiàn)代化且無(wú)需緩存即可實(shí)現(xiàn)極速打包功能的 JavaScript 打包器 。esbuild 無(wú)需配置就能打包 TypeScript 庫(kù)的工具，可以打包任何受到 Node.js 平臺(tái)支持的文件，包括 .js、.json、.mjs、.ts、.tsx，在本文撰寫時(shí) esbuild 也實(shí)驗(yàn)性地支持 .css 文件的打包。

項(xiàng)目初始化

開始介紹前，先啟動(dòng)一個(gè)終端并創(chuàng)建一個(gè)新目錄（可以隨意命名）。然后在終端中輸入 cd 進(jìn)入該目錄。本文我們使用目錄名 my-typescript-library。

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

我們需要一個(gè) package.json 文件，所以請(qǐng)?jiān)诮K端中輸入 npm init -y。

npm init -y

這將立即使用默認(rèn)設(shè)置為我們創(chuàng)建一個(gè) package.json 文件。

創(chuàng)建一個(gè)名為 src 的目錄，然后在該目錄中創(chuàng)建一個(gè)名為 index.ts 的新文件。這個(gè)文件是我們庫(kù)的入口點(diǎn)。

由于要使用 tsup，所以將它作為開發(fā)依賴安裝：

npm i -D tsup

由于我們?cè)?src/index.ts 中創(chuàng)建的文件將成為我們庫(kù)的入口點(diǎn)，因此我們需要指示 tsup 消費(fèi)這些文件并將其輸出到某個(gè)位置（我們將設(shè)置輸出目錄為 ./dist）。

繼續(xù)修改 package.json，在 scripts 屬性下添加 build 和 start 腳本：

現(xiàn)在當(dāng)我們運(yùn)行 npm run build 時(shí)，tsup 編譯器會(huì)使用 src/index.ts 并自動(dòng)編譯文件到 ./dist 目錄中：

下面是目錄結(jié)構(gòu)

默認(rèn)情況下，tsup 將打包文件輸出到 ./dist 目錄，不過(guò)我們可以通過(guò)配置文件進(jìn)行配置，這塊我們后面會(huì)詳細(xì)介紹。

如果我們查看生成的文件 ./dist/index.js，會(huì)發(fā)現(xiàn)內(nèi)容為空。這是因?yàn)槲覀冞€沒(méi)有為庫(kù)編寫任何代碼。

添加功能代碼

讓我們輸入一些基本代碼，以便更詳細(xì)地分析輸出結(jié)果：

src/index.ts：

再次運(yùn)行 npm run build，并注意 tsup 是如何將我們的代碼轉(zhuǎn)譯為 ES5 的：

讓我們通過(guò)創(chuàng)建一個(gè)名為 client.js 的文件來(lái)測(cè)試我們的庫(kù)，包含以下代碼：

在終端中輸入 node client.js 運(yùn)行文件，你會(huì)看到：

很好！我們的庫(kù)到目前運(yùn)行得非常順利。