Unplugin 统一插件系统入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00814/article/details/148578437

Unplugin 统一插件系统入门指南

unplugin Unified plugin system for Vite, Rollup, Webpack, esbuild, and more 项目地址: https://gitcode.com/gh_mirrors/un/unplugin

什么是 Unplugin

Unplugin 是一个创新的 JavaScript 构建工具插件系统，它通过提供统一的 API 接口，让开发者能够编写一次插件代码，就能在多种主流构建工具中运行。这个项目解决了前端生态中不同构建工具插件系统不兼容的痛点，大大提高了开发效率。

核心特性

统一插件接口：基于 Rollup 插件 API 设计，提供一致的开发体验
多构建工具支持：目前支持 Vite、Rollup、webpack、esbuild、Rspack、Rolldown 和 Farm
高性能优化：内置智能过滤机制，避免不必要的文件处理
灵活扩展：支持嵌套插件和构建工具特定逻辑

快速开始

环境准备

在开始使用 Unplugin 前，请确保：

Node.js 版本 ≥ 18.12.0
如果使用 webpack，需要 webpack 5 或更高版本

安装插件

根据你的包管理器选择安装命令：

# npm
npm install unplugin-starter --save-dev

# yarn
yarn add unplugin-starter -D

# pnpm
pnpm add unplugin-starter -D

# bun
bun add unplugin-starter -D

构建工具集成

Unplugin 提供了与各种构建工具的无缝集成方式：

Vite 配置示例

// vite.config.ts
import Starter from 'unplugin-starter/vite'

export default defineConfig({
  plugins: [
    Starter({
      /* 插件选项 */
    }),
  ],
})

webpack 配置示例

// webpack.config.js
module.exports = {
  plugins: [
    require('unplugin-starter/webpack')({
      /* 插件选项 */
    }),
  ],
}

Rollup 配置示例

// rollup.config.js
import Starter from 'unplugin-starter/rollup'

export default {
  plugins: [
    Starter({
      /* 插件选项 */
    }),
  ],
}

插件开发指南

基础插件结构

一个典型的 Unplugin 插件采用以下结构：

import { createUnplugin } from 'unplugin'

export const unplugin = createUnplugin((options) => ({
  name: 'my-plugin',
  transform(code) {
    // 转换代码逻辑
    return code
  },
  // 其他钩子...
}))

关键钩子函数

Unplugin 支持以下核心钩子：

| 钩子名称 | 功能描述 | 支持情况 | |----------------|----------------------------|-----------------------| | buildStart | 构建开始时触发 | 所有构建工具支持 | | resolveId | 解析模块ID时触发 | 大部分构建工具支持 | | load | 加载文件内容时触发 | 所有构建工具支持 | | transform | 转换文件内容时触发 | 所有构建工具支持 | | buildEnd | 构建结束时触发 | 所有构建工具支持 | | writeBundle | 写入打包文件时触发 | 所有构建工具支持 |

性能优化技巧

使用过滤机制可以显著提升插件性能：

transform: {
  filter: {
    id: {
      include: [/\.vue$/, '**/*.ts'],
      exclude: /node_modules/,
    },
  },
  handler(code) {
    // 只处理匹配的文件
  }
}

高级用法

嵌套插件

Unplugin 支持将多个插件组合成一个：

export const unplugin = createUnplugin(() => [
  {
    name: 'plugin-a',
    transform(code) { /* ... */ },
  },
  {
    name: 'plugin-b',
    resolveId(id) { /* ... */ },
  },
])

构建工具特定逻辑

对于需要构建工具特定功能的场景，可以使用专用配置：

export const unplugin = createUnplugin((options, meta) => ({
  name: 'my-plugin',
  vite: {
    // Vite 特定配置
    configureServer(server) { /* ... */ },
  },
  webpack(compiler) {
    // webpack 特定配置
  },
  // 其他构建工具配置...
}))