向 NPM 發布軟件包本身并不是一個特別困難的挑戰。但是,配置你的 TypeScript 項目以取得成功可能是一個挑戰。你的軟件包能在大多數項目上運行嗎?用戶能否使用類型提示和自動完成功能?它能與 ES Modules (ESM) 和 CommonJS (CJS) 風格的導入一起使用嗎?
閱讀完本篇文章后,你將了解如何使你的 TypeScript 包在任何(或大多數)JavaScript 和 TypeScript 項目中更易于訪問和使用,包括瀏覽器支持!
如果你正在閱讀本文,那么你很可能已經建立了一個 TypeScript 項目。如果這樣做,你可能想跳到后續步驟或留下來檢查是否存在差異。
讓我們首先創建基本 Node.js 項目并添加 TypeScript 作為開發依賴項:
npm init -ynpm install typescript --save-dev
你可能希望在 src 文件夾中構建代碼。因此,讓我們在其中創建包的入口點:
mkdir srctouch src/index.ts
現在,Node.js 和瀏覽器不理解 TypeScript,因此我們需要設置 tsc (TypeScript 編譯器)將 TypeScript 代碼編譯為 JavaScript。讓我們通過運行以下命令將 tsconfig.json 文件添加到我們的項目中:
npx tsc --init
如果我們現在運行 npx tsc,它會掃描我們的文件夾并在與 .ts 文件相同的目錄中創建 .js 文件(這是不可取的)。讓我們在運行之前添加更好的配置,以免造成混亂。
將以下行添加到 tsconfig.json:
{ "compilerOptions": { // ... Other options "rootDir": "./src", // Where to look for our code "outDir": "./dist", // Where to place the compiled JavaScript}
我們還向 package.json 添加一個“build”腳本:
{ "scripts": { "build": "tsc" }}
如果我們現在運行 npm run build ,一個新的 dist 文件夾將出現,其中包含已編譯的 JavaScript。如果你使用的是 Git,請確保將 dist 文件夾添加到 .gitignore 中。
我們已經可以將 TypeScript 編譯為 JavaScript。但是,如果你按原樣將其發布到 npm,則只能在其他 JavaScript 項目中無縫使用它。此外,默認目標配置是“es2016”,而現代瀏覽器最多僅支持“es2015”。那么讓我們解決這個問題吧!
首先,讓我們將目標(target[1])更改為 es2015 (或 es6 ,因為它們是相同的)。esModuleInterop[2] 默認為 true。讓我們保持原樣,因為它通過允許 ESM 樣式導入來提高兼容性。
我們使用 TypeScript 都有一個原因:類型!但是,如果你現在就構建并發布你的軟件包,那么它將不會發布任何類型。讓我們通過將 declaration[3] 設置為 true 來解決這個問題。這將與 .js 文件一起生成聲明文件(.d.ts)。僅憑這一點,你的軟件包就能在 TypeScript 項目中使用,甚至在 JavaScript 項目中也能提供類型提示。
聲明文件在改善支持和開發人員體驗方面已經發揮了很大作用。然而,我們可以通過添加 declarationMap[4] 來更進一步。這樣,將生成源映射 (.d.ts.map),以將我們的聲明文件 (.d.ts) 映射到我們的原始 TypeScript 源代碼 (.ts)。這意味著代碼編輯器在使用“轉到定義”時可以轉到原始 TypeScript 代碼,而不是編譯后的 JavaScript 文件。
當我們這樣做時,sourceMap 將添加源映射文件 (.js.map),這些文件允許調試器和其他工具在實際處理發出的 JavaScript 文件時顯示原始 TypeScript 源代碼。
使用 declarationMap 或 sourceMap 意味著我們還需要將源代碼與軟件包一起發布到 npm。
綜上所述,這是我們最終的 tsconfig.json 文件:
{ "compilerOptions": { "target": "es2015", "module": "commonjs", "strict": true, "esModuleInterop": true, "rootDir": "./src", "outDir": "./dist", "sourceMap": true, "declaration": true, "declarationMap": true, }}
這里的事情要簡單得多。當用戶導入包時,我們需要指定包的入口點。因此,讓我們將 main 設置為 dist/index.js 。
除了入口點之外,我們還需要指定主要類型聲明文件。在這種情況下,這將是 dist/index.d.ts 。
我們還需要指定隨包一起提供哪些文件。當然,我們需要發送構建的 JavaScript 文件,但由于我們使用的是 sourceMap 和 declarationMap ,所以我們還需要發送 src 。
這是包含所有內容的參考 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" }}
發布到 NPM 并不困難。我強烈建議你查看官方說明,但以下是一般步驟:
請記住,如果你更新軟件包,則需要在再次發布之前增加 package.json 中的 version 選項。
有更復雜的(和推薦的)方法來進行發布,例如使用 GitHub Action 和 releases,特別是對于開源包,但這超出了本文的范圍。
原文:https://blog.liblab.com/typescript-npm-packages-done-right/
本文鏈接:http://www.www897cc.com/showinfo-26-69003-0.html如何優雅的發布一個 TypeScript 軟件包?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com