unbuild

介绍

unbuild 通常用于做：工具库、npm 包、Vue 插件，是一个专门为 npm 库设计的构建工具。

特点是：

1. 自动输出 ESM + CJS
2. 自动生成类型
3. 零配置
4. 适合库开发
5. unbuild 底层用的是 Rollup，所有 node_modules 默认 external。

配置

import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  // 每次构建前，先删除 dist 目录
  clean: true,
  // 生成 TypeScript 类型声明文件 (.d.ts)
  declaration: true,
  // 以 src/index.ts 作为入口文件
  entries: ['src/index'],
  rollup: { emitCJS: true }
});

打包产物分析

打包产物

index.cjs
index.mjs
index.d.ts
index.d.mts
index.d.cts

1. index.mjs

• ES Module 版本，老 Node 项目或老工具用。
• 用于import { xxx } from 'your-lib'

2. index.cjs

• CommonJS 版本
• 用于const lib = require('your-lib')

3. index.d.ts

• 通用 TypeScript 类型声明，
• 默认类型入口

4. index.d.mts

• ESM 模块的类型声明
• 用于type: "module" 或者 Node ESM 解析场景。
• 和 d.ts 的区别：明确声明是 ESM 类型

5. index.d.cts

• CommonJS 类型声明
• 在严格 CJS + TS 模式下用。

三种类型文件

index.d.ts   ← 最重要
index.mjs    ← 主入口
index.cjs    ← 兼容

d.mts / d.cts 是增强兼容用。

unbuild package.json

"type": "module"

type: module 限制的是包内部的 .js 文件

如果你有：

dist/index.js

在：

"type": "module"

下，它会被当作 ESM。

架构

vue → peerDependencies
@iconify/vue → peerDependencies

图标组件是 UI 层能力，不是运行时核心依赖，让宿主决定 iconify 版本是更安全的。