使用 vite 构建一个表情选择插件 (2)

使用 rollup 构建库时，通常借助 rollup 插件自动生成 d.ts 文件。但是尝试了社区的两个 vite dts 插件，效果不尽人意。由于这个项目比较简单，干脆直接手写一个 d.ts 文件。在 public 下创建 d.ts 文件，vite 会在构建时自动将 /public 中的资源拷贝到 dist 目录下。

public/emoji-popover.d.ts

export interface IEmojiItem { value: string label?: string } export interface IOptions { button: string container?: string targetElement: string emojiList: Array<IEmojiItem> wrapClassName?: string wrapAnimationClassName?: string } export declare class EmojiButton { private options: IOptions private wrapClassName: string private wrapCount: number private wrapCountClassName: string constructor(options: IOptions) private init(): void private createButtonListener(): void private createEmojiContainer() private createEmojiList() private createEmojiItem() private createMask() /* * Toggle emoji popover. */ public toggle(isShow: boolean): void /* * Listen to Choose an emoji. */ public onSelect(callback: (value: string) => void): void } export default EmojiButton

构建生成的文件结构如下：

├─dist │ ├─emoji-popover.d.ts │ ├─emoji-popover.es.js │ ├─emoji-popover.iife.js │ ├─emoji-popover.umd.js │ └─style.css 插件样式