【制作npm包4】api-extractor 学习

制作npm包目录

本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处

一、申请npm账号、个人包和组织包区别

二、了解 package.json 相关配置

三、 了解 tsconfig.json 相关配置

四、 api-extractor 学习

五、npm包制作完整教程,我的第一个npm包


api-extractor 学习

安装

pnpm add @microsoft/api-extractor

简述

还记得在 package.json 的配置当中,有一个types的配置项,这个配置项就是用来配置类型注释的地址的。

我大致总结了以下几种方式来生成类型注释

方法 描述
手写 可以自己在项目的根目录创建.d.ts文件,但是比较费力
tsc生成 官方支持,比较方便,但是文件零散,不利于包使用
打包插件生成类型注释 这个方法也十分省力,但是几乎没有官方插件,bug也是层出不穷

最后发现一种比较方便的工具,就是api-extractor了,这个文件是在vue官方的仓库当中发现了这种类型打包方式。他的主要作用是将tsc生成的类型注释,聚合成为单个文件,这样一来对包的分发十分有利。

选择这个工具的原因不仅仅是vue采用了这个打包方式,而且这种方式是微软官方制作,不担心跑路问题。

什么是 API Extractor

API Extractor 是一个 TypeScript 分析工具,可生成以下三种不同的文件类型:

  1. API Report 用于生成一个基础的api流程
  2. .d.ts文件生成,是一个类型文件的打包工具,将分散的.d.ts文件进行聚合,如同vite打包成js文件是一个道理。
  3. docModel 生成一个简单的api文档

在一般的项目包制作过程当中,用到他的类型文件聚合能力。

配置

json 复制代码
{
  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
  "projectFolder": ".",
  "mainEntryPointFilePath": "./dist/types/index.d.ts", // 这个文件是打包的入口,通常是`tsc -b xxx` 编译文件的输出位置
  "dtsRollup": {
    "enabled": true // 这个配置设置为true,表示用于聚合生成`.d.ts`文件
  },
  "apiReport": {
    "enabled": false
  },
  "docModel": {
    "enabled": false
  },
  "tsdocMetadata": {
    "enabled": false
  },
  "messages": {
    "compilerMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },
    "extractorMessageReporting": {
      "default": {
        "logLevel": "warning",
        "addToApiReportFile": true
      },
      "ae-forgotten-export": {
        "logLevel": "none"
      },
      "ae-missing-release-tag": {
        "logLevel": "none"
      }
    },
    "tsdocMessageReporting": {
      "default": {
        "logLevel": "warning"
      },
      "tsdoc-undefined-tag": {
        "logLevel": "none"
      }
    }
  }
}

在项目根目录创建api-extractor.json文件,将上述文件拷贝进去。

工作流程介绍

我们的项目一般存在若干的ts文件,当执行tsc进行编译时,会对每一个文件生成对应的d.ts文件,但是这种方法并不符合实际。一般而言,在使用一个库的时候,只会存在一个d.ts入口文件,而且这个文件用户在使用时,只会安装npm,直接导入对应api去使用,那么如果这个文件过于分散,可能会造成使用者的心理负担。

所以,对于tsc编译过的文件,再次通过api-extractor进行聚合是一种合适的方式。

对于api-extractor 的介绍到这里就可以结束了,如果对他的配置项有兴趣,可以直接参考官方网站[1](#1)

打包配置可参考:https://github.com/vue3plugin/npm-pkg-by-vite/blob/main/package.json


  1. https://api-extractor.com/pages/overview/intro/ ↩︎
相关推荐
键盘不能没有CV键33 分钟前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ1 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python2 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep2 小时前
【前端】前端运行环境的结构
前端
你的人类朋友3 小时前
【Node】认识multer库
前端·javascript·后端
Aitter3 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
deng-c-f3 小时前
Linux C/C++ 学习日记(28):KCP协议(四):如何实现更复杂的业务:将连接状态的管理进行封装,用户只需实现发送、接收、断开的处理逻辑。
学习·网络编程·kcp
mapbar_front3 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'4 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'4 小时前
css `dorp-shadow`
前端·css