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

自定義配置：通過?tsup.config.ts

當(dāng)然我們還可以使用?tsup?做更多的事情——通過配置文件。tsup?在運(yùn)行時(shí)會(huì)自動(dòng)讀取并名為?tsup.config.ts?的文件。我們創(chuàng)建一下這個(gè)文件，并添加以下內(nèi)容：

import type { Options } from 'tsup' const config: Options = { ?// } export default config

通過這個(gè)配置文件，我們可以指示?tsup?編譯器執(zhí)行不同的操作。

例如，我們可以通過將?dts?設(shè)置為?true?來指示?tsup?生成 TypeScript 聲明文件：

//?tsup.config.ts

const config: Options = { ?entry: ['src/index.ts'], ?dts: true, }

對(duì)于這個(gè)設(shè)置，我們需要在項(xiàng)目中安裝 TypeScript，否則會(huì)收到一個(gè)錯(cuò)誤：

npm i --save-dev typescript

當(dāng)我們?cè)俅芜\(yùn)行?npm run build?時(shí)，tsup 就幫我們生成了一個(gè)額外的聲明文件。

我們還可以生成源代碼映射文件，以便在調(diào)試過程中生成更準(zhǔn)確的堆棧跟蹤（stack traces）信息：

tsup.config.ts

現(xiàn)在，客戶端代碼（client.js）就能在 IDE（如 VS Code）中看到 TypeScript 類型提示了：

多格式輸出

一個(gè)庫的作者面臨的問題是如何支持不同的客戶端消費(fèi)格式。目前有幾種常見的格式：

中我們可以輕松地通過?format?字段配置，生成這三種格式。

執(zhí)行后的打印輸出：

執(zhí)行后的打印輸出：

目錄結(jié)構(gòu)：

在我們的?client.js?文件中，目前我們可以沒有問題地使用我們的庫。然而，為了讓消費(fèi)者導(dǎo)入與其項(xiàng)目所使用格式相對(duì)應(yīng)的文件，我們需要編輯?package.json?為特定導(dǎo)入方式指向特定格式的文件。

關(guān)于?exports?的工作原理，超出了本篇文章的范圍，有興趣的同學(xué)，可以點(diǎn)擊這里轉(zhuǎn)到官方的 Node.js 文檔進(jìn)行查看。

發(fā)布 npm 包

現(xiàn)在我們已經(jīng)介紹了創(chuàng)建一個(gè)最小化的現(xiàn)代 JavaScript/TypeScript 庫所需的基本推薦要求！下一步，我們需要將我們的包發(fā)布到 npm 中央倉庫中，方便三方用戶可以通過?npm?安裝我們的包。

為此，在?package.json?中添加一個(gè)?publishConfig?鍵，并將?access?字段設(shè)置成“public”：

在終端中輸入?npm publish，你應(yīng)該會(huì)看到類似于以下內(nèi)容（將?my-typescript-library?替換成你的包名）：

結(jié)束！

本文對(duì)應(yīng)的代碼倉庫，可以點(diǎn)擊這里（https://github.com/jsmanifest/my-typescript-library）查看。

總結(jié)

這篇文章到此結(jié)束！希望對(duì)你有幫助，謝謝！