javascript - 用 TypeScript 編寫 npm 模組

我正在開發我的第一個 npm 模組。我之前簡單地使用過 TypeScript，一個大問題是對於很多模組沒有可用的定義檔。因此，我認為用 TypeScript 編寫我的模組會是一個好主意。

然而，我找不到任何關於最佳做法的資訊。我找到了一個相關問題「我可以用 CoffeeScript 編寫 npm 套件嗎？」其中有人建議只發布 JavaScript 檔案。但與 CoffeeScript 檔案相反，如果 TypeScript 檔案在 TypeScript 應用中使用，這些檔案實際上可能會很有用。

當發佈 npm 套件時，我應該包含 TypeScript 檔案，還是只發佈 JavaScript 檔案並將生成的 .d.ts 檔案提供給 DefinitelyTyped？

答案＃1

請執行以下步驟，以使用任何版本的 TypeScript（從 2.x 到 5.x）建立 npm 套件：

像平常一樣建立你的專案（包括測試和所有內容）
將 declaration: true 添加到 tsconfig.json 以生成類型定義。
透過 index.ts 匯出 API
在 package.json 中，指向你生成的 typings。例如，如果你的 outDir 是 dist，則在你的 package.json 中添加 "types": "dist/index.d.ts"。
在 package.json 中，指向你的主要入口文件。例如，如果你的 outDir 是 dist 且主要入口文件是 index.js，則在你的 package.json 中添加 "main": "dist/index.js"。
在 package.json 中，將你想要發佈到 npm 的檔案列入白名單：files: ["/dist"]。另一種方法是使用 .npmignore 將檔案列入黑名單，但這樣較難保持最新。
使用 npm publish 發佈到 npm。使用 semver 規範來更新（修補/錯誤修復 npm version patch，非破壞性新增功能 npm version minor，破壞性 API 變更 npm version major）

由於我花了一些時間篩選網路上所有這個主題的過時資源（像是本頁上的例子……），我決定將其整理成如何撰寫 TypeScript 函式庫的指南，並附上一個最新且可運作的最小範例。

答案＃2

這是一個用 TypeScript 編寫的 Node 模組範例： https://github.com/basarat/ts-npm-module

這裡有一個使用這個示例模組的 TypeScript 範例專案 https://github.com/basarat/ts-npm-module-consume

基本上你需要：

使用 commonjs 和 declaration:true 編譯
生成一個 .d.ts 文件

然後

讓你的 IDE 閱讀生成的 .d.ts。

Atom-TypeScript 只是圍繞這個提供了一個不錯的工作流程：https://github.com/TypeStrong/atom-typescript#packagejson-support

答案＃3

這是一個使用 TypeScript 1.8.10 的較新回答：

我的專案結構是：

|
|--- src
|--- test
|--- dist     <= My gulp file compiles and places the js, sourcemaps and .d.ts files here
|      |--- src
|      |--- test
|--- typings
.gitignore
.npmignore
gulpfile.js
package.json
README.md
tsconfig.json
tslint.json
typings.json

我在 .npmignore 中添加了以下內容，以避免包含多餘的文件，並保持導入套件並使其正常運作所需的最少內容：

node_modules/
*.log
*.tgz

src/
test/
gulpfile.js
tsconfig.json
tslint.json
typings.json
typings
dist/test

我的 .gitignore 包含：

typings

ignore .js.map files
*.js.map
*.js
dist

我的 package.json 有：

"main": "dist/src/index.js",
"typings":  "dist/src/index.d.ts",

現在我運行： npm pack

解壓後的檔案具有以下結構：

|
|--- dist
|       |--- src
|              |
|              index.js
|              index.js.map
|              index.d.ts
|
package.json
README.md

現在我去我想作為庫使用的專案並輸入： npm install ./project-1.0.0.tgz

它成功安裝了。

現在我在我的專案中創建了一個檔案 index.ts，我剛剛在專案中安裝了 npm import Project=require("project");

輸入 Project. 給了我 Intellisense 選項，這正是整個練習的目的。

希望這能幫助其他人在他們的更大項目中將 TypeScript npm 項目作為內部庫使用。

附註： 我相信這種將專案編譯成可以在其他專案中使用的 npm 模組的方法，讓人聯想到 .NET 世界中的 .dll。我完全可以想像專案在 VS Code 的一個解決方案中被組織，每個專案生成一個 npm 套件，然後可以作為依賴在解決方案中的另一個專案中使用。

由於我花了相當多時間才弄明白這個問題，我將其貼出來，以防有人在這裡卡住。

我也針對一個已關閉的錯誤回報發布過它，網址是： https://github.com/npm/npm/issues/11546

此範例已上傳至 Github：vchatterji/tsc-seed