05-插件系统

插件系统

插件开发、常用插件

---

📋 学习目标

• ✅ 理解 ESBuild 的插件系统
• ✅ 掌握插件开发方法
• ✅ 了解常用插件
• ✅ 理解插件钩子

---

插件基础

插件结构

const myPlugin = {
  name: 'my-plugin',
  setup(build) {
    // 插件逻辑
  }
}

使用插件

{
  plugins: [myPlugin]
}

---

插件钩子

onResolve

解析模块路径：

build.onResolve({ filter: /^env$/ }, args => ({
  path: args.path,
  namespace: 'env-ns'
}))

onLoad

加载模块内容：

build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
  contents: JSON.stringify(process.env),
  loader: 'json'
}))

---

常用插件

esbuild-plugin-alias

路径别名：

const alias = require('esbuild-plugin-alias')
 
{
  plugins: [
    alias({
      'react': require.resolve('react')
    })
  ]
}

esbuild-plugin-copy

复制文件：

const copy = require('esbuild-plugin-copy')
 
{
  plugins: [
    copy({
      assets: {
        from: ['public/**/*'],
        to: ['dist']
      }
    })
  ]
}

---

相关链接

• ESBuild 插件文档
• ESBuild MOC

---

最后更新：2025

---

ESBuild 插件系统