如何優(yōu)雅的發(fā)布一個(gè) TypeScript 軟件包？
向 NPM 發(fā)布軟件包本身并不是一個(gè)特別困難的挑戰(zhàn)。但是，配置你的 TypeScript 項(xiàng)目以取得成功可能是一個(gè)挑戰(zhàn)。你的軟件包能在大多數(shù)項(xiàng)目上運(yùn)行嗎？用戶能否使用類型提示和自動(dòng)完成功能？它能與 ES Modules (ESM) 和 CommonJS (CJS) 風(fēng)格的導(dǎo)入一起使用嗎？
閱讀完本篇文章后，你將了解如何使你的 TypeScript 包在任何（或大多數(shù)）JavaScript 和 TypeScript 項(xiàng)目中更易于訪問(wèn)和使用，包括瀏覽器支持！
創(chuàng)建 TypeScript 項(xiàng)目
如果你正在閱讀本文，那么你很可能已經(jīng)建立了一個(gè) TypeScript 項(xiàng)目。如果這樣做，你可能想跳到后續(xù)步驟或留下來(lái)檢查是否存在差異。
讓我們首先創(chuàng)建基本 Node.js 項(xiàng)目并添加 TypeScript 作為開發(fā)依賴項(xiàng)：
npm init -y
npm install typescript --save-dev你可能希望在 src 文件夾中構(gòu)建代碼。因此，讓我們?cè)谄渲袆?chuàng)建包的入口點(diǎn)：
mkdir src
touch src/index.ts現(xiàn)在，Node.js 和瀏覽器不理解 TypeScript，因此我們需要設(shè)置 tsc （TypeScript 編譯器）將 TypeScript 代碼編譯為 JavaScript。讓我們通過(guò)運(yùn)行以下命令將 tsconfig.json 文件添加到我們的項(xiàng)目中：
npx tsc --init如果我們現(xiàn)在運(yùn)行 npx tsc，它會(huì)掃描我們的文件夾并在與 .ts 文件相同的目錄中創(chuàng)建 .js 文件（這是不可取的）。讓我們?cè)谶\(yùn)行之前添加更好的配置，以免造成混亂。
將以下行添加到 tsconfig.json：
{
"compilerOptions": {
// ... Other options
"rootDir": "./src", // Where to look for our code
"outDir": "./dist", // Where to place the compiled JavaScript
}我們還向 package.json 添加一個(gè)“build”腳本：
{
"scripts": {
"build": "tsc"
}
}如果我們現(xiàn)在運(yùn)行 npm run build ，一個(gè)新的 dist 文件夾將出現(xiàn)，其中包含已編譯的 JavaScript。如果你使用的是 Git，請(qǐng)確保將 dist 文件夾添加到 .gitignore 中。
設(shè)置 tsc 以獲得最佳開發(fā)者體驗(yàn)
我們已經(jīng)可以將 TypeScript 編譯為 JavaScript。但是，如果你按原樣將其發(fā)布到 npm，則只能在其他 JavaScript 項(xiàng)目中無(wú)縫使用它。此外，默認(rèn)目標(biāo)配置是“es2016”，而現(xiàn)代瀏覽器最多僅支持“es2015”。那么讓我們解決這個(gè)問(wèn)題吧！
首先，讓我們將目標(biāo)(target[1])更改為 es2015 （或 es6 ，因?yàn)樗鼈兪窍嗤模sModuleInterop[2] 默認(rèn)為 true。讓我們保持原樣，因?yàn)樗ㄟ^(guò)允許 ESM 樣式導(dǎo)入來(lái)提高兼容性。
我們使用 TypeScript 都有一個(gè)原因：類型！但是，如果你現(xiàn)在就構(gòu)建并發(fā)布你的軟件包，那么它將不會(huì)發(fā)布任何類型。讓我們通過(guò)將 declaration[3] 設(shè)置為 true 來(lái)解決這個(gè)問(wèn)題。這將與 .js 文件一起生成聲明文件（.d.ts）。僅憑這一點(diǎn)，你的軟件包就能在 TypeScript 項(xiàng)目中使用，甚至在 JavaScript 項(xiàng)目中也能提供類型提示。
聲明文件在改善支持和開發(fā)人員體驗(yàn)方面已經(jīng)發(fā)揮了很大作用。然而，我們可以通過(guò)添加 declarationMap[4] 來(lái)更進(jìn)一步。這樣，將生成源映射 (.d.ts.map)，以將我們的聲明文件 (.d.ts) 映射到我們的原始 TypeScript 源代碼 (.ts)。這意味著代碼編輯器在使用“轉(zhuǎn)到定義”時(shí)可以轉(zhuǎn)到原始 TypeScript 代碼，而不是編譯后的 JavaScript 文件。
當(dāng)我們這樣做時(shí)，sourceMap 將添加源映射文件 (.js.map)，這些文件允許調(diào)試器和其他工具在實(shí)際處理發(fā)出的 JavaScript 文件時(shí)顯示原始 TypeScript 源代碼。
使用 declarationMap 或 sourceMap 意味著我們還需要將源代碼與軟件包一起發(fā)布到 npm。
綜上所述，這是我們最終的 tsconfig.json 文件：
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"rootDir": "./src",
"outDir": "./dist",
"sourceMap": true,
"declaration": true,
"declarationMap": true,
}
}package.json
這里的事情要簡(jiǎn)單得多。當(dāng)用戶導(dǎo)入包時(shí)，我們需要指定包的入口點(diǎn)。因此，讓我們將 main 設(shè)置為 dist/index.js 。
除了入口點(diǎn)之外，我們還需要指定主要類型聲明文件。在這種情況下，這將是 dist/index.d.ts 。
我們還需要指定隨包一起提供哪些文件。當(dāng)然，我們需要發(fā)送構(gòu)建的 JavaScript 文件，但由于我們使用的是 sourceMap 和 declarationMap ，所以我們還需要發(fā)送 src 。
這是包含所有內(nèi)容的參考 package.json ：
{
"name": "the-greatest-sdk", // Your package name
"version": "1.0.3", // Your package version
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc"
},
"keywords": [], // Add related keywords
"author": "liblab", // Add yourself here
"license": "ISC",
"files": ["dist", "src"],
"devDependencies": {
"ts-node": "^10.9.1",
"typescript": "^5.0.4"
}
}發(fā)布到 NPM
發(fā)布到 NPM 并不困難。我強(qiáng)烈建議你查看官方說(shuō)明，但以下是一般步驟：
- 確保你的 package.json 設(shè)置正確。
- 構(gòu)建項(xiàng)目（如果你遵循指南，則使用 npm run build ）。
- 如果你還沒(méi)有登錄，請(qǐng)使用 npm login 向 npm 進(jìn)行身份驗(yàn)證（你需要一個(gè) npm 帳戶）。
- 運(yùn)行 npm publish 。
請(qǐng)記住，如果你更新軟件包，則需要在再次發(fā)布之前增加 package.json 中的 version 選項(xiàng)。
有更復(fù)雜的（和推薦的）方法來(lái)進(jìn)行發(fā)布，例如使用 GitHub Action 和 releases，特別是對(duì)于開源包，但這超出了本文的范圍。
原文：https://blog.liblab.com/typescript-npm-packages-done-right/
