title: 發(fā)布一個(gè)具有提示功能的npm包
date: 2018-01-06 22:04:08
tags:
2018年了, 前幾天合肥下了一場大雪, 現(xiàn)在是小寒節(jié)氣, 晚上寫博客有點(diǎn)冷.
今天發(fā)布了一個(gè) npm 包 @penggy/mysql , 在使用過程中, 發(fā)現(xiàn) vscode 不能對其中的 api 提供智能提示. 于是查資料, 將其改造成自帶提示的包. 這樣在其他 vscode 項(xiàng)目里面 npm install 它之后, 就能 api 提示, 方便其他開發(fā)者使用.
使用 typescript 編寫發(fā)布包代碼
發(fā)布包代碼使用 typescript 語言編寫, typescript 編譯器將 ts 文件編譯成 js 文件的同時(shí), 能夠生成后綴為 d.ts 的類型聲明文件, 這個(gè)文件便是 vscode 提示功能的關(guān)鍵. vscode 正是通過解析 *.d.ts 這種類型聲明文件來支持提示功能.
開始一個(gè) typescript 項(xiàng)目:
安裝 typescript 編譯器
npm i -g typescript
生成項(xiàng)目配置文件 tsconfig.json
tsc --init
tsconfig.json 內(nèi)容如下:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"declaration": true
}
}
其中 declaration true 表示將要生成 d.ts 類型聲明文件, 我們要把這個(gè)文件介紹給 vscode , 好使它有針對我們這個(gè)庫的提示功能.
編譯 ts 到 js
在 vscode 里, 編譯 ts 到 js 非常簡單, 按住 Ctrl + Shift + B 可選僅編譯一次, 或者開啟監(jiān)聽模式(保存 ts 文件, 立即觸發(fā)編譯動作).
編譯完成, 在 ts 文件同目錄下, 生成對應(yīng)的同名 .js 和 .d.ts 文件
在 package.json 中聲明類型文件位置
package.json 文件中, 加入 types 字段如下:
{
"name": "@penggy/mysql",
"version": "1.0.6",
"description": "Promise wrapper of mysql",
"main": "./index.js",
"types": "./index.d.ts",
types 也可以寫成 typings, 效果相同, 官方參考
將 js 和 d.ts 文件包含到發(fā)布文件
ts 文件不需要發(fā)布到 npm 包, 但是編譯生成的 js 和 d.ts 文件需要發(fā)布到 npm.
修改 package.json 如下:
{
"name": "@penggy/mysql",
"version": "1.0.6",
"description": "Promise wrapper of mysql",
"main": "./index.js",
"types": "./index.d.ts",
"scripts": {
"test": "node test.js"
},
"files": [
"index.js",
"index.d.ts",
"README.md"
],
files 字段指定工程目錄下面哪些文件需要發(fā)布到 npm.
發(fā)布到 npm
npm publish
至此, 發(fā)布一個(gè)具有提示功能的 npm 包完成. 在其他項(xiàng)目中, 正常 npm install, require 之前發(fā)布的 npm 包, 不出意外, vscode 就應(yīng)該能進(jìn)行這個(gè)包的 api 提示了.
怎么? 還是沒有提示?
如果沒有提示, 檢查項(xiàng)目目錄下是否存在 jsconfig.json 文件, jsconfig.json 需要聲明 compilerOptions > module 為 commonjs, 如下:
{
"compilerOptions": {
"target": "ES6",
"baseUrl": ".",
"module": "commonjs"
}
}
