如何在 NPM 上建立和發布 TypeScript 套件

隨著 TypeScript 的日益流行，許多開發人員正在創建靜態類型包以利用該語言提供的優勢。在這篇文章中，我們將介紹使用 TypeScript 建立和發布 NPM 套件的過程。

---

1. 配置環境

確保安裝了 Node.js、NPM 和 TypeScript。您可以使用以下命令全域安裝 TypeScript：

npm install -g typescript

檢查一切是否安裝正確：

node -v
npm -v
tsc -v

2. 建立專案

首先為您的專案建立目錄：

mkdir meu-pacote-typescript
cd meu-pacote-typescript

初始化 Node.js 專案：

npm init

這將建立 package.json 文件，您可以在其中定義基本套件資訊。

3. 配置 TypeScript

現在，初始化一個 TypeScript 專案：

tsc --init

這將建立一個 tsconfig.json 檔案。根據需要進行編輯，但常見的配置如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

在這裡，我們配置 TypeScript 編譯器來產生帶有 CommonJS 模組的 ES6 程式碼，並包含類型聲明（聲明：true）。編譯後的程式碼會放在dist.

目錄下

4. 編寫程式碼

建立一個 src 目錄並在其中建立一個 index.ts 檔案：

mkdir src
touch src/index.ts

在index.ts檔中，寫你的包碼。讓我們建立一個簡單的函數來將字串轉換為大寫：

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. 編譯程式碼

將 TypeScript 編譯成 JavaScript：

tsc

這將在 dist 目錄中產生 JavaScript 檔案和類型聲明。

6. 本地測試包

要測試您的包，您可以將其本地安裝在另一個專案中：

1. 在您的測試項目目錄中，運行：

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. 在測試項目中使用此函數：

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

這可以確保 JavaScript 程式碼和型別宣告都能正常運作。

7. 在 NPM 上發布

如果一切正常，您就可以發布您的包包了。

1. NPM 登入

如果您還沒有 NPM 帳戶，請建立一個並登入：

   npm login

1. 出版

發佈前，先在 package.json 中新增建置腳本：

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

並在package.json中加入輸出路徑：

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

現在編譯發布：

   npm run build
   npm publish

如果套件名稱已經存在，您需要選擇一個新名稱。

8. 更新套件

要發布新版本，請更改 package.json 中的版本，再次運行 npm run build，然後發布：

npm publish

9. 良好實踐

• 文件：包含一個 README.md 文件，解釋如何使用你的套件。
• 測試：使用 Jest 等框架編寫測試，以確保程式碼能如預期運作。
• Linting：使用 ESLint 和 Prettier 等工具來維護程式碼品質。
• 版本控制：按照 SemVer 對您的套件進行版本控制。

結論

在 NPM 上建立和發布 TypeScript 套件不僅可以提高程式碼質量，還可以為使用你的套件的人提供打字方面的好處。透過遵循本指南，您將準備好與 JavaScript 和 TypeScript 社群分享您的解決方案，為更強大、更穩健的開發生態系統做出貢獻。

現在您已經了解了流程，那麼開始建立您的下一個 TypeScript 套件呢？

以上是如何在 NPM 上建立和發布 TypeScript 套件的詳細內容。更多資訊請關注PHP中文網其他相關文章！