rollup源码之plugin编写指南-一一网

前言

rollup作为一款轻量的打包编译工具，在我们日常的工具库开发中使用非常广泛，但是对于它的插件编写，从目前来看官网上对于插件的介绍几乎都是英文，学习起来也不是很友好, 例子也相对较少，所以整理一篇文章来学习也是不错的。除此之外，作为使用最广泛的webpack，它的插件编写也比较简单和清晰的，那它和rollup中的插件使用又有什么区别呢。下面将借助流程图并搭配一些rollup源码来讲解。

插件执行

我们知道wepback执行插件是借助了tapable用于同步串行、并行，异步串行并行等方式来执行插件，那rollup其实自己实现一套简易的类似tapable的功能。大家可以定位到源码中src/utils/PluginDriver.ts文件。

class PluginDriver {
    hookFirst() {
        // ...
    }
    hookFirstSync() {
        // ...
    }
    hookParallel() {
        // ...
    }
    hookReduceArg0() {
        // ...
    }
    hookReduceArg0Sync() {
        // ...
    }
    hookReduceValue() {
        // ...
    }
    hookReduceValueSync() {
        // ...
    }
    hookSeqSync() {
        // ...
    }
}
复制代码

下面分别介绍这些方法，都有什么作用，相信大家都通过方法名看出了具体作用了~

hookFirst: 异步串行，出现第一个返回值不为空的插件，就停止执行,类似tapable的AsyncSeriesBailHook
hookFirstSync: 同步串行，出现第一个返回值不为空的插件，就停止执行，类似tapable的SyncBailHook
hookParallel：异步并行 Promise.all，类似tapable的AsyncParallelHook
hookReduceArg0: 异步串行，把上一个hook的返回值作为下一个hook的参数，如果返回为空就停止执行，并返回最后的值, 类似tapable的AsyncSeriesWaterfallHook
hookReduceArg0Sync：同步串行，把上一个hook的返回值作为下一个hook的参数，如果返回为空就停止执行，并返回最后的值, 类似tapable的SyncWaterfallHook
hookReduceValue: 异步串行，传入一个初始值value，上一个hook处理好value后的返回值作为下一个hook的参数
hookReduceValueSync: 同步串行，传入一个初始值value，上一个hook处理好value后的返回值作为下一个hook的参数
hookSeq: 异步串行，忽略返回值，类似tapable的SyncHook
hookSeqSync: 同步串行，忽略返回值类似tapable的AsyncSeriesHook

通过上面的介绍，大家听过大概知道了rollup的插件是如何执行的。

示例

我们先从一段代码开始

const rollup = require('rollup');
const path = require('path')
const inputOptions = {
  input: './src/app.js'
}
const outputOptions = {
  file: 'bundle.js',
  format: 'cjs'
}

async function build() {
  // 第一步
  const bundle = await rollup.rollup(inputOptions);
  
  // 第二步
  const { code, map } = await bundle.generate(outputOptions);
  
  // 第三步
  await bundle.write(outputOptions);
}

build();
复制代码