文章讀譯自The 30 second guide to publishing a typescript package to npm，部分內(nèi)容有修改哈。

這篇文章要求你有一定的 JS 、TS 和 NPM 的知識(shí)，如果你寫過(guò)普通的 NPM 包就更好啦~如果沒(méi)有的話網(wǎng)上也很多教程的，都很簡(jiǎn)單~

發(fā)布過(guò) npm 包的同學(xué)都知道，初始化一個(gè) npm 項(xiàng)目，直接用 npm init -y 就可以了，那如果要用 ts 呢，直接 tsc --init 即可。這兩個(gè)操作會(huì)生成 package.json 和 tsconfig.json 文件。然后我們按以下步驟修改一下配置：

1. 添加 "declaration": true 到你的 tsconfig.json

這行語(yǔ)句告訴 TypsScript 在編譯的時(shí)候?yàn)槟阕詣?dòng)生成 d.ts 文件。需要注意的是，當(dāng)你使用私有的類型時(shí)，但是這個(gè)類型也外部 API 的一部分，這個(gè)包的使用者就得不到該類型的類型推斷，TS 編譯器也會(huì)報(bào)警告，這時(shí)你只需要在該類型前添加 export 即可。

2. 添加 "types": "index.d.ts" 到你的 package.json

當(dāng)其他人導(dǎo)入你的包的時(shí)候，這句話就告訴了 TS 編譯器到哪里去尋找類型定義文件。這里的 .d.ts 文件和 main 入口指向的是一個(gè)文件夾，所以通常情況下，你的 package.json 會(huì)包含下面兩行：

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

（上面默認(rèn)你在 tsconfig.json 中配置的 outDir 指向的是 dist 目錄）

3. 保證你的 dist 目錄被添加到了 .gitignore

在我們的代碼倉(cāng)庫(kù)，一般不需要包含編譯后的代碼，只需要包含源碼即可。所以我們不對(duì) dist 目錄做版本管理。并且這也不影響我們發(fā)布 dist 目錄到 npm。

4. 運(yùn)行構(gòu)建命令

運(yùn)行 tsc 即可編譯所有的源碼。這非常方便，通常情況下，我們可以添加一條命令到 package.json：

"build": "tsc"

5. 運(yùn)行 npm publish

接下來(lái)就是要發(fā)布到 npm 了，在 package.json 添加以下命令：

"release": "tsc && npm publish"

筆者習(xí)慣使用 standard-version 配合 commitizen 來(lái)發(fā)布 npm 包，感興趣的同學(xué)可以自行了解一下~

如果想要在發(fā)布前調(diào)試本地包，可以使用 npm link 命令，在此項(xiàng)目根目錄執(zhí)行npm link， 然后在要調(diào)試的 demo 項(xiàng)目中執(zhí)行 npm link <your package name>，然后在代碼中直接引入使用即可。

下面是完成配置后的 package.json：

{
  "name": "my-ts-lib",
  "version": "1.0.0",
  "description": "My npm package written in TS",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "release": "tsc && npm publish"
  },
  "author": "savokiss",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^3.5.3"
  }
}

下面是最終的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2017", "es7", "es6", "dom"],
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "dist"]
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。