前言

這篇文章是在我之前的文章 [自定義npm包的創建、發布、更新和撤銷] 的基礎上做的擴展,主要是針對如何創建以及發布一個typeScript語言的npm包。

大綱

1、創建關于typeScript的npm包
2、往npm包中添加一些內容
3、對package.json進行配置
4、發布
5、創建使用案例
6、優化

博客原文

https://www.cnblogs.com/shcrk/p/10363532.html

1、創建關于typeScript的npm包

1.1、創建npm包

執行: npm init -y
獲得一個默認的package.json

1.2、添加typeScript依賴

執行： npm install typescript
添加typeScript的依賴包到npm包中

1.3、配置tsconfig.json

創建一個tsconfig.json文件，并添加一些配置（如果沒有這個配置文件,typeScript編譯的時候就是根據默認的配置執行）

//tsconfig.json配置如下：
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  }
}

根據上述步驟執行結束,你會獲得如下圖的文件目錄

創建npm包

2、往npm包中添加一些內容

2.1、向npm中添加一些內容

/* src/tookit.ts */
export class Toolkit {
  printSomething() {}
}

/* index.ts */
import { Toolkit } from "./toolkit";
export { Toolkit };

2.2、執行tsc進行編譯，最終你會得到如下圖

image.png

3、對package.json進行配置

1、修改npm包入口
2、配置該npm包的typeScript聲明文件

image.png

4、發布

執行：
npm adduser（如果已經登錄過可以不用執行）
npm publish

image.png

5、創建使用案例

發布了自己的npm包之后當然就是使用了，不能使用的npm包沒有意義

5.1、創建案例

npm init -y

5.2、添加自定義的npm包的依賴

npm install npm-tsc

image.png

5.3、調用自定義的npm包并使用

//index.ts
import { Toolkit } from "npm-tsc";
let tk = new Toolkit();
tk.printSomething();

5.4、編譯并執行

執行：
tsc index.ts
node index.js

image.png

6、優化

綜上已經完成了一個使用typeScript語言寫成的npm簡單包，我們可以對當前的npm包進行優化
1、一般npm包只會上傳編譯后的js文件以及聲明文件，因此我們需要把ts文件刪除
2、刪除ts文件的同時要記得把npm包中的tsconfig.json文件一同刪除了
3、修改版本號并發布

image.png

更新依賴包重新編譯執行，檢測是否存在問題

image.png