编写 transform 钩子插件

transform 钩子是最常用的模块处理钩子，用于转换模块代码。

基本结构

export default function transformPlugin() {
  return {
    name: 'transform-plugin',
    transform(code, id) {
      // id 是模块绝对路径
      // code 是模块原始代码

      // 返回转换结果
      return {
        code: transformedCode,
        map: sourceMap
      }
    }
  }
}

文件类型匹配

export default function customFilePlugin() {
  return {
    name: 'custom-file-plugin',
    transform(code, id) {
      // 只处理 .custom 文件
      if (!id.endsWith('.custom')) {
        return null
      }

      return {
        code: `export default ${JSON.stringify(code)}`,
        map: null
      }
    }
  }
}

使用 createFilter

import { createFilter } from '@rollup/pluginutils'

export default function myPlugin(options = {}) {
  const filter = createFilter(
    options.include || ['**/*.js'],
    options.exclude || ['node_modules/**']
  )

  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!filter(id)) return null

      return {
        code: transformCode(code),
        map: null
      }
    }
  }
}

注意：createFilter 可精确控制处理哪些文件。

返回值格式

transform(code, id) {
  // 不处理，返回 null
  return null

  // 只返回代码
  return transformedCode

  // 返回代码和 Source Map
  return {
    code: transformedCode,
    map: sourceMap
  }
}

生成 Source Map

import { generate } from 'magic-string'

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      const s = new MagicString(code)

      // 修改代码
      s.overwrite(0, 10, 'new code')

      return {
        code: s.toString(),
        map: s.generateMap({ hires: true })
      }
    }
  }
}

性能优化

export default function myPlugin() {
  const cache = new Map()

  return {
    name: 'my-plugin',
    transform(code, id) {
      // 检查缓存
      if (cache.has(id)) {
        return cache.get(id)
      }

      const result = transformCode(code)
      cache.set(id, result)
      return result
    }
  }
}

要点总结

• transform 用于转换模块代码
• 返回 null 表示不处理该模块
• createFilter 控制处理范围
• 缓存转换结果提升性能