发布一个具有提示功能的npm包

来源:http://www.chinese-glasses.com 作者:Web前端 人气:90 发布时间:2020-03-31
摘要:知识点 :在自己的.d.ts文件中可以对ts系统自带的interface进行 声明合并(扩展) . 生成项目配置文件 tsconfig.json tsc --init tsconfig.json 内容如下: { "compilerOptions": { "target": "ES6", "module": "commonjs"

知识点: 在自己的.d.ts文件中可以对ts系统自带的interface进行声明合并(扩展).

生成项目配置文件 tsconfig.json

tsc --init

tsconfig.json 内容如下:

{
  "compilerOptions": {
    "target": "ES6", 
    "module": "commonjs",                     
    "declaration": true
  }
}

其中 declaration true 表示将要生成 d.ts 类型声明文件, 我们要把这个文件介绍给 vscode , 好使它有针对我们这个库的提示功能.

首先我发现ts自带的声明中, 对webkit或moz开头的这种api并没有声明类型, 所以我们需要自己补充一下.

2018年了, 前几天合肥下了一场大雪, 现在是小寒节气, 晚上写博客有点冷.

不然ts会提示找不到对应的方法.


最近后台项目需要一个"全屏"的按钮, github了下, 发现都仅仅支持"开启全屏", 而没有"切换"/"监听全屏状态"等功能, 所以打算自己写一个(主要代码量不大, 嘿嘿).

将 js 和 d.ts 文件包含到发布文件

ts 文件不需要发布到 npm 包, 但是编译生成的 js 和 d.ts 文件需要发布到 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 字段指定工程目录下面哪些文件需要发布到 npm.

时间: 2019-10-19阅读: 104标签: 全屏

今天发布了一个 npm 包 @penggy/mysql , 在使用过程中, 发现 vscode 不能对其中的 api 提供智能提示. 于是查资料, 将其改造成自带提示的包. 这样在其他 vscode 项目里面 npm install 它之后, 就能 api 提示, 方便其他开发者使用.

所有现代浏览器(IE11)都提供了"全屏"的api,只是不同浏览器有不同的api(基本就是前缀不同), 所以我们要做的就是判断浏览器, 然后执行正确的api.

使用 typescript 编写发布包代码

发布包代码使用 typescript 语言编写, typescript 编译器将 ts 文件编译成 js 文件的同时, 能够生成后缀为 d.ts 的类型声明文件, 这个文件便是 vscode 提示功能的关键. vscode 正是通过解析 *.d.ts 这种类型声明文件来支持提示功能.

开始一个 typescript 项目:

// global.d.tsinterface HTMLElement { // 进入全屏 webkitRequestFullscreen(options?: FullscreenOptions): Promisevoid; webkitRequestFullScreen(options?: FullscreenOptions): Promisevoid; msRequestFullscreen(options?: FullscreenOptions): Promisevoid; mozRequestFullScreen(options?: FullscreenOptions): Promisevoid; // 监听全屏 onwebkitfullscreenchange: ((this: Element, ev: Event) = any) | null; onmozfullscreenchange: ((this: Element, ev: Event) = any) | null; MSFullscreenChange: ((this: Element, ev: Event) = any) | null;}interface Document { // 当前全屏的元素 readonly webkitFullscreenElement: Element | null; readonly msFullscreenElement: Element | null; readonly mozFullScreenElement: Element | null; // 退出全屏 webkitExitFullscreen(): Promisevoid; msExitFullscreen(): Promisevoid; mozCancelFullScreen(): Promisevoid;}

怎么? 还是没有提示?

如果没有提示, 检查项目目录下是否存在 jsconfig.json 文件, jsconfig.json 需要声明 compilerOptions > module 为 commonjs, 如下:

{
    "compilerOptions": {
        "target": "ES6",
        "baseUrl": ".",
        "module": "commonjs"
    }
}

本文由10bet发布于Web前端,转载请注明出处:发布一个具有提示功能的npm包

关键词:

最火资讯