制作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文檔

在一般的項目包制作過程當中，用到他的類型文件聚合能力。

配置

{"$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 的介紹到這里就可以結束了，如果對他的配置項有興趣，可以直接參考官方網站¹。

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

---

1. https://api-extractor.com/pages/overview/intro/ ??