前言
這篇文章是在我之前的文章 [自定義npm包的創建、發布、更新和撤銷] 的基礎上做的擴展,主要是針對如何創建以及發布一個typeScript語言的npm包。
大綱
1、創建關于typeScript的npm包
2、往npm包中添加一些內容
3、對package.json進行配置
4、發布
5、創建使用案例
6、優化
博客原文
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