模块打包_Rollup插件开发-js教程-PHP中文网

开发rollup插件需理解其钩子机制，核心是name属性和resolveid、load、transform等钩子函数；1. resolveid解析模块路径，2. load返回源码，3. transform转换代码；示例插件将.demo文件转为导出固定字符串；通过buildstart、generatebundle等钩子可控制构建流程；调试可用console.log结合rollup-watch，发布时命名遵循rollup-plugin-xxx规范并支持esm。

模块打包_rollup插件开发

开发Rollup插件并不复杂，关键在于理解其设计模式和钩子机制。Rollup本身是一个基于ES模块的打包工具，专注于将小块代码编译成大块复杂的库或应用。插件系统是其核心扩展方式，允许你在构建过程的各个阶段介入并修改行为。

理解Rollup插件的基本结构

一个Rollup插件本质上是一个对象，至少包含一个name属性和若干钩子函数（如resolveId、load、transform等）。

最简单的插件结构如下：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(id) {
      // 控制模块id如何被解析
    },
    load(id) {
      // 自定义文件加载内容
    },
    transform(code, id) {
      // 对模块代码进行转换
    }
  };
}

每个钩子在构建流程中特定时机被调用，你可以根据需求实现一个或多个。

常用钩子及其用途

掌握几个核心钩子能应对大多数场景：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

resolveId: 决定某个导入路径对应的真实模块ID。可用于支持别名、虚拟模块或拦截特定依赖。
load: 返回某个模块的实际源码。配合resolveId可实现动态生成模块内容。
transform: 对每个模块的源码进行处理，比如语法转换、注入代码等，适合集成Babel、TypeScript等。
buildStart / buildEnd: 构建开始和结束时执行，常用于初始化资源或清理工作。
generateBundle / writeBundle: 在输出阶段操作最终产物，例如生成额外文件、压缩资源等。

动手写一个简单插件

假设我们想创建一个插件，将所有.demo文件转为返回固定字符串的模块。

export default function demoPlugin() {
  return {
    name: 'rollup-plugin-demo',
    resolveId(id) {
      if (id.endsWith('.demo')) {
        return this.getResolvedId(id, null); // 标记为已解析
      }
    },
    load(id) {
      if (id.endsWith('.demo')) {
        return 'export default "Hello from .demo file!"';
      }
    }
  };
}

使用时在rollup.config.js中引入即可：

import demoPlugin from './plugins/demo-plugin';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [demoPlugin()]
};