日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

如何優(yōu)雅的發(fā)布一個 TypeScript 軟件包?

來源: 責(zé)編: 時間:2024-01-26 17:05:47 191觀看
導(dǎo)讀向 NPM 發(fā)布軟件包本身并不是一個特別困難的挑戰(zhàn)。但是,配置你的 TypeScript 項目以取得成功可能是一個挑戰(zhàn)。你的軟件包能在大多數(shù)項目上運(yùn)行嗎?用戶能否使用類型提示和自動完成功能?它能與 ES Modules (ESM) 和 Common

向 NPM 發(fā)布軟件包本身并不是一個特別困難的挑戰(zhàn)。但是,配置你的 TypeScript 項目以取得成功可能是一個挑戰(zhàn)。你的軟件包能在大多數(shù)項目上運(yùn)行嗎?用戶能否使用類型提示和自動完成功能?它能與 ES Modules (ESM) 和 CommonJS (CJS) 風(fēng)格的導(dǎo)入一起使用嗎?41w28資訊網(wǎng)——每日最新資訊28at.com

閱讀完本篇文章后,你將了解如何使你的 TypeScript 包在任何(或大多數(shù))JavaScript 和 TypeScript 項目中更易于訪問和使用,包括瀏覽器支持!41w28資訊網(wǎng)——每日最新資訊28at.com

創(chuàng)建 TypeScript 項目

如果你正在閱讀本文,那么你很可能已經(jīng)建立了一個 TypeScript 項目。如果這樣做,你可能想跳到后續(xù)步驟或留下來檢查是否存在差異。41w28資訊網(wǎng)——每日最新資訊28at.com

讓我們首先創(chuàng)建基本 Node.js 項目并添加 TypeScript 作為開發(fā)依賴項:41w28資訊網(wǎng)——每日最新資訊28at.com

npm init -ynpm install typescript --save-dev

你可能希望在 src 文件夾中構(gòu)建代碼。因此,讓我們在其中創(chuàng)建包的入口點(diǎn):41w28資訊網(wǎng)——每日最新資訊28at.com

mkdir srctouch src/index.ts

現(xiàn)在,Node.js 和瀏覽器不理解 TypeScript,因此我們需要設(shè)置 tsc (TypeScript 編譯器)將 TypeScript 代碼編譯為 JavaScript。讓我們通過運(yùn)行以下命令將 tsconfig.json 文件添加到我們的項目中:41w28資訊網(wǎng)——每日最新資訊28at.com

npx tsc --init

如果我們現(xiàn)在運(yùn)行 npx tsc,它會掃描我們的文件夾并在與 .ts 文件相同的目錄中創(chuàng)建 .js 文件(這是不可取的)。讓我們在運(yùn)行之前添加更好的配置,以免造成混亂。41w28資訊網(wǎng)——每日最新資訊28at.com

將以下行添加到 tsconfig.json:41w28資訊網(wǎng)——每日最新資訊28at.com

{    "compilerOptions": {        // ... Other options        "rootDir": "./src", // Where to look for our code        "outDir": "./dist", // Where to place the compiled JavaScript}

我們還向 package.json 添加一個“build”腳本:41w28資訊網(wǎng)——每日最新資訊28at.com

{    "scripts": {        "build": "tsc"    }}

如果我們現(xiàn)在運(yùn)行 npm run build ,一個新的 dist 文件夾將出現(xiàn),其中包含已編譯的 JavaScript。如果你使用的是 Git,請確保將 dist 文件夾添加到 .gitignore 中。41w28資訊網(wǎng)——每日最新資訊28at.com

設(shè)置 tsc 以獲得最佳開發(fā)者體驗

我們已經(jīng)可以將 TypeScript 編譯為 JavaScript。但是,如果你按原樣將其發(fā)布到 npm,則只能在其他 JavaScript 項目中無縫使用它。此外,默認(rèn)目標(biāo)配置是“es2016”,而現(xiàn)代瀏覽器最多僅支持“es2015”。那么讓我們解決這個問題吧!41w28資訊網(wǎng)——每日最新資訊28at.com

首先,讓我們將目標(biāo)(target[1])更改為 es2015 (或 es6 ,因為它們是相同的)。esModuleInterop[2] 默認(rèn)為 true。讓我們保持原樣,因為它通過允許 ESM 樣式導(dǎo)入來提高兼容性。41w28資訊網(wǎng)——每日最新資訊28at.com

我們使用 TypeScript 都有一個原因:類型!但是,如果你現(xiàn)在就構(gòu)建并發(fā)布你的軟件包,那么它將不會發(fā)布任何類型。讓我們通過將 declaration[3] 設(shè)置為 true 來解決這個問題。這將與 .js 文件一起生成聲明文件(.d.ts)。僅憑這一點(diǎn),你的軟件包就能在 TypeScript 項目中使用,甚至在 JavaScript 項目中也能提供類型提示。41w28資訊網(wǎng)——每日最新資訊28at.com

聲明文件在改善支持和開發(fā)人員體驗方面已經(jīng)發(fā)揮了很大作用。然而,我們可以通過添加 declarationMap[4] 來更進(jìn)一步。這樣,將生成源映射 (.d.ts.map),以將我們的聲明文件 (.d.ts) 映射到我們的原始 TypeScript 源代碼 (.ts)。這意味著代碼編輯器在使用“轉(zhuǎn)到定義”時可以轉(zhuǎn)到原始 TypeScript 代碼,而不是編譯后的 JavaScript 文件。41w28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)我們這樣做時,sourceMap 將添加源映射文件 (.js.map),這些文件允許調(diào)試器和其他工具在實際處理發(fā)出的 JavaScript 文件時顯示原始 TypeScript 源代碼。41w28資訊網(wǎng)——每日最新資訊28at.com

使用 declarationMap 或 sourceMap 意味著我們還需要將源代碼與軟件包一起發(fā)布到 npm。41w28資訊網(wǎng)——每日最新資訊28at.com

綜上所述,這是我們最終的 tsconfig.json 文件:41w28資訊網(wǎng)——每日最新資訊28at.com

{    "compilerOptions": {        "target": "es2015",        "module": "commonjs",        "strict": true,        "esModuleInterop": true,        "rootDir": "./src",        "outDir": "./dist",        "sourceMap": true,        "declaration": true,        "declarationMap": true,    }}

package.json

這里的事情要簡單得多。當(dāng)用戶導(dǎo)入包時,我們需要指定包的入口點(diǎn)。因此,讓我們將 main 設(shè)置為 dist/index.js 。41w28資訊網(wǎng)——每日最新資訊28at.com

除了入口點(diǎn)之外,我們還需要指定主要類型聲明文件。在這種情況下,這將是 dist/index.d.ts 。41w28資訊網(wǎng)——每日最新資訊28at.com

我們還需要指定隨包一起提供哪些文件。當(dāng)然,我們需要發(fā)送構(gòu)建的 JavaScript 文件,但由于我們使用的是 sourceMap 和 declarationMap ,所以我們還需要發(fā)送 src 。41w28資訊網(wǎng)——每日最新資訊28at.com

這是包含所有內(nèi)容的參考 package.json :41w28資訊網(wǎng)——每日最新資訊28at.com

{  "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)烈建議你查看官方說明,但以下是一般步驟:41w28資訊網(wǎng)——每日最新資訊28at.com

  1. 確保你的 package.json 設(shè)置正確。
  2. 構(gòu)建項目(如果你遵循指南,則使用 npm run build )。
  3. 如果你還沒有登錄,請使用 npm login 向 npm 進(jìn)行身份驗證(你需要一個 npm 帳戶)。
  4. 運(yùn)行 npm publish 。

請記住,如果你更新軟件包,則需要在再次發(fā)布之前增加 package.json 中的 version 選項。41w28資訊網(wǎng)——每日最新資訊28at.com

有更復(fù)雜的(和推薦的)方法來進(jìn)行發(fā)布,例如使用 GitHub Action 和 releases,特別是對于開源包,但這超出了本文的范圍。41w28資訊網(wǎng)——每日最新資訊28at.com

原文:https://blog.liblab.com/typescript-npm-packages-done-right/41w28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-69003-0.html如何優(yōu)雅的發(fā)布一個 TypeScript 軟件包?

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 面試官:RabbitMQ如何實現(xiàn)延遲隊列?

下一篇: 大語言模型插件功能在攜程的Python實踐

標(biāo)簽:
  • 熱門焦點(diǎn)
Top 主站蜘蛛池模板: 临沂市| 和硕县| 凤城市| 辽中县| 芜湖市| 和林格尔县| 株洲县| 佛教| 疏附县| 休宁县| 天峨县| 阳山县| 吉隆县| 江口县| 沙坪坝区| 禹州市| 西和县| 济南市| 临潭县| 黄大仙区| 拜城县| 南安市| 固安县| 潜江市| 陵水| 博白县| 油尖旺区| 来凤县| 铅山县| 阳新县| 精河县| 揭阳市| 阳西县| 洪雅县| 西和县| 托里县| 阿克苏市| 辉县市| 新乡市| 中西区| 鄂州市|