unbuild

9 阅读1分钟

介绍

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'
  1. index.cjs
  • CommonJS 版本
  • 用于const lib = require('your-lib')
  1. index.d.ts
  • 通用 TypeScript 类型声明,
  • 默认类型入口
  1. index.d.mts
  • ESM 模块的类型声明
  • 用于type: "module" 或者 Node ESM 解析场景。
  • 和 d.ts 的区别:明确声明是 ESM 类型
  1. 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 版本是更安全的。