教你 30 秒發佈一個 TypeScript 包到 NPM

文章讀譯自 The 30 second guide to publishing a typescript package to npm，部份內容有修改哈。

這篇文章要求你有必定的 JS 、TS 和 NPM 的知識，若是你寫過普通的 NPM 包就更好啦~若是沒有的話網上也不少教程的，都很簡單~

發佈過 npm 包的同窗都知道，初始化一個 npm 項目，直接用 npm init -y 就能夠了，那若是要用 ts 呢，直接 tsc --init 便可。這兩個操做會生成 package.json 和 tsconfig.json 文件。而後咱們按如下步驟修改一下配置：

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

這行語句告訴 TypsScript 在編譯的時候爲你自動生成 d.ts 文件。須要注意的是，當你使用私有的類型時，可是這個類型也外部 API 的一部分，這個包的使用者就得不到該類型的類型推斷，TS 編譯器也會報警告，這時你只須要在該類型前添加 export 便可。

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

當其餘人導入你的包的時候，這句話就告訴了 TS 編譯器到哪裏去尋找類型定義文件。這裏的 .d.ts 文件和 main 入口指向的是一個文件夾，因此一般狀況下，你的 package.json 會包含下面兩行：

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

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

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

在咱們的代碼倉庫，通常不須要包含編譯後的代碼，只須要包含源碼便可。因此咱們不對 dist 目錄作版本管理。而且這也不影響咱們發佈 dist 目錄到 npm。

4. 運行構建命令

運行 tsc 便可編譯全部的源碼。這很是方便，一般狀況下，咱們能夠添加一條命令到 package.json：

"build": "tsc"

5. 運行 npm publish

接下來就是要發佈到 npm 了，在 package.json 添加如下命令：

"release": "tsc && npm publish"

筆者習慣使用 standard-version 配合 commitizen 來發布 npm 包，感興趣的同窗能夠自行了解一下~

若是想要在發佈前調試本地包，可使用 npm link 命令，在此項目根目錄執行npm link， 而後在要調試的 demo 項目中執行 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"]
}

歡迎關注個人公衆號：碼力全開（codingonfire）

每週更新一篇原創或翻譯文章~