编写 load 钩子插件

load 钩子用于自定义模块加载逻辑，可返回虚拟模块内容。

基本结构

export default function loadPlugin() {
  return {
    name: 'load-plugin',
    load(id) {
      // id 是模块路径
      // 返回模块内容替代默认加载

      return 'export default "virtual content"'
    }
  }
}

虚拟模块实现

export default function virtualPlugin() {
  const virtualId = 'virtual:config'

  return {
    name: 'virtual-plugin',
    resolveId(source) {
      // 解析虚拟模块路径
      if (source === virtualId) {
        return virtualId
      }
      return null
    },
    load(id) {
      // 加载虚拟模块内容
      if (id === virtualId) {
        return `export default {
          apiUrl: "${process.env.API_URL}"
        }`
      }
      return null
    }
  }
}

使用虚拟模块：

import config from 'virtual:config'
console.log(config.apiUrl)

注意：虚拟模块必须先在 resolveId 中返回 id，然后在 load 中返回内容。

动态生成模块

export default function dynamicPlugin() {
  return {
    name: 'dynamic-plugin',
    resolveId(source) {
      if (source.startsWith('dynamic:')) {
        return source
      }
      return null
    },
    load(id) {
      if (id.startsWith('dynamic:')) {
        const name = id.replace('dynamic:', '')
        return `
          export function ${name}() {
            console.log('${name} called')
          }
        `
      }
      return null
    }
  }
}

从其他来源加载

import fs from 'fs'

export default function customLoadPlugin() {
  return {
    name: 'custom-load',
    load(id) {
      // 从特殊位置加载
      if (id.includes('special-dir')) {
        const content = fs.readFileSync(id, 'utf-8')
        return transform(content)
      }
      return null
    }
  }
}

load 与 transform 配合

export default function myPlugin() {
  return {
    name: 'my-plugin',
    load(id) {
      // 加载阶段生成代码
      if (id.endsWith('.template')) {
        return generateFromTemplate(id)
      }
    },
    transform(code, id) {
      // 转换阶段处理代码
      if (id.endsWith('.template')) {
        return optimize(code)
      }
    }
  }
}

要点总结

• load 用于自定义模块加载
• 虚拟模块需 resolveId + load 配合
• 可动态生成模块内容
• load 在 transform 之前执行