rollup 插件架构-驱动设计 PluginDriver

文章目录

  • Graph
  • PluginDriver
    • 生成 PluginDriver 实例和 PluginCache 缓存
    • 创建插件上下文 pluginContext
    • 初始化 pluginContext 缓存设置、方法
    • 插件中使用缓存
    • 可替换的 replace pluginContext
    • PluginDriver 提供 asyn、first、parallel 等类型 hook
      • getSortedPlugins 运行时收集并存储插件对应 hook
      • sync hook
      • parallel hook
    • this.runHookSync
    • this.runHook
  • 和 webpack 插件系统区别

Graph

  • 在依赖图谱 Graph 中创建 PluginDriver
  • Graph 负责整个 Rollup 打包过程中模块的解析、转化、生成，所以在Graph 中创建 PlunginDriver 能够获得整个打包生命周期的模块信息
	const graph = new Graph(inputOptions, watcher);

PluginDriver

生成 PluginDriver 实例和 PluginCache 缓存

  • 整个 Rollup 构建生命周期中，通过 pluginDriver 这个实例去触发 hook
export default class Graph {readonly acornParser: typeof acorn.Parser;readonly cachedModules = new Map<string, ModuleJSON>();// ...entryModules: Module[] = [];readonly fileOperationQueue: Queue;readonly moduleLoader: ModuleLoader;readonly modulesById = new Map<string, Module | ExternalModule>();needsTreeshakingPass = false;phase: BuildPhase = BuildPhase.LOAD_AND_PARSE;readonly pluginDriver: PluginDriver;// ...constructor (private readonly options: NormalizedInputOptions, watcher: RollupWatcher | null) {// 根据用户设置配置插件缓存this.pluginCache = options.cache?.plugins || Object.create(null);// ...this.pluginDriver = new PluginDriver(this, options, options.plugins, this.pluginCache); // 给插件封装能调用 graph 的方法// ...}

创建插件上下文 pluginContext

  • pluginContext 是交给用户在插件中可以调用的相关方法、属性
  • 可以看到多个插件的上下文共享同一个 pluginCache、graph
export class PluginDriver {// ... 相关方法private readonly pluginContexts: ReadonlyMap<Plugin, PluginContext>;private readonly plugins: readonly Plugin[];private readonly sortedPlugins = new Map<AsyncPluginHooks, Plugin[]>();private readonly unfulfilledActions = new Set<HookAction>();constructor(private readonly graph: Graph,private readonly options: NormalizedInputOptions,userPlugins: readonly Plugin[],private readonly pluginCache: Record<string, SerializablePluginCache> | undefined,basePluginDriver?: PluginDriver) {// ...this.plugins = [...(basePluginDriver ? basePluginDriver.plugins : []), ...userPlugins];const existingPluginNames = new Set<string>();// 为每个插件创建一个 pluginContext this.pluginContexts = new Map(this.plugins.map(plugin => [plugin,getPluginContext(plugin, pluginCache, graph, options, this.fileEmitter, existingPluginNames)]));// ...}
}

初始化 pluginContext 缓存设置、方法

  • 将每个 plugin 按照传递的配置设置缓存 key，存放进 Graph 的 pluginCache 集合中保存
export function getPluginContext(plugin: Plugin,pluginCache: Record<string, SerializablePluginCache> | void,graph: Graph,options: NormalizedInputOptions,fileEmitter: FileEmitter,existingPluginNames: Set<string>
): PluginContext {let cacheable = true;if (typeof plugin.cacheKey !== 'string') {if ( // 插件没写 name 不缓存plugin.name.startsWith(ANONYMOUS_PLUGIN_PREFIX) ||plugin.name.startsWith(ANONYMOUS_OUTPUT_PLUGIN_PREFIX) ||existingPluginNames.has(plugin.name)) {cacheable = false;} else {existingPluginNames.add(plugin.name);}}let cacheInstance: PluginCache;if (!pluginCache) {cacheInstance = NO_CACHE;} else if (cacheable) {// 根据插件传递的配置设置缓存 keyconst cacheKey = plugin.cacheKey || plugin.name;cacheInstance = createPluginCache( // 封装操作 cache 缓存的操作(get、has、set、delete)// 在创建时已经根据 key 分配了对象pluginCache[cacheKey] || (pluginCache[cacheKey] = Object.create(null)));} else {cacheInstance = getCacheForUncacheablePlugin(plugin.name);}// 返回给开发者可以调用的方法、属性return {addWatchFile(id) {if (graph.phase >= BuildPhase.GENERATE) {return this.error(errorInvalidRollupPhaseForAddWatchFile());}graph.watchFiles[id] = true;},cache: cacheInstance,// ...};
}// 记录缓存操作
export function createPluginCache(cache: SerializablePluginCache): PluginCache {return {delete(id: string) {return delete cache[id];},get(id: string) {const item = cache[id];if (!item) return;item[0] = 0;return item[1];},has(id: string) {const item = cache[id];if (!item) return false;item[0] = 0;return true;},set(id: string, value: any) {cache[id] = [0, value];}};
}

插件中使用缓存

  • 插件 cache 的内容都会放在 Graph 的 pluginCache 中，在分配缓存时已经根据插件的 key 进行了设置，所以在插件中可以直接 this.cache 进行使用而不必担心和其它插件的缓存冲突
{name: "test-plugin",buildStart() {if (!this.cache.has("cache")) {this.cache.set("cache", "cache something");} else {// 第二次执行rollup的时候会执行console.log(this.cache.get("cache"));}},
}

可替换的 replace pluginContext

  • pluginContext 会根据不同的 hook，动态增加属性、方法，比如 transform hook
  • 在通过 pluginDriver.hookReduceArg0 调用 transform hook时，第四个参数即是替换后的 pluginContext
		code = await pluginDriver.hookReduceArg0('transform',[currentSource, id],transformReducer,(pluginContext, plugin): TransformPluginContext => { pluginName = plugin.name;return {...pluginContext, // 在原来 context 的基础上再添加额外的属性addWatchFile(id: string) {transformDependencies.push(id); // 收集插件中通过 this.addWatchFile 添加的文件 idpluginContext.addWatchFile(id);},cache: customTransformCache? pluginContext.cache: getTrackedPluginCache(pluginContext.cache, useCustomTransformCache),};});

PluginDriver 提供 asyn、first、parallel 等类型 hook

  • rollup 根据不同场景提供了不同类型的 hook
    • async：该钩子也可以返回一个解析为相同类型的值的 Promise；否则，该钩子被标记为 sync。
    • first：如果有多个插件实现此钩子，则钩子按顺序运行，直到钩子返回一个不是 null 或 undefined 的值。
    • sequential：如果有多个插件实现此钩子，则所有这些钩子将按指定的插件顺序运行。如果钩子是 async，则此类后续钩子将等待当前钩子解决后再运行。
    • parallel：如果有多个插件实现此钩子，则所有这些钩子将按指定的插件顺序运行。如果钩子是 async，则此类后续钩子将并行运行，而不是等待当前钩子。
export class PluginDriver {// ...hookFirstSync<H extends SyncPluginHooks & FirstPluginHooks>(hookName: H,parameters: Parameters<FunctionPluginHooks[H]>,replaceContext?: ReplaceContext): ReturnType<FunctionPluginHooks[H]> | null {// ...}async hookParallel<H extends AsyncPluginHooks & ParallelPluginHooks>(hookName: H,parameters: Parameters<FunctionPluginHooks[H]>,replaceContext?: ReplaceContext): Promise<void> {// ...}// ...
}

getSortedPlugins 运行时收集并存储插件对应 hook

  • Rollup 通过 getSortedPlugins 对插件的对应 hook 进行排序后收集在 this.sortedPlugins 集合中存储
  • 根据 pre、normal、post 顺序排序每个hook
// 抽取插件中有对应 hookName 的插件
private getSortedPlugins( hookName: keyof FunctionPluginHooks | AddonHooks,validateHandler?: (handler: unknown, hookName: string, plugin: Plugin) => void
): Plugin[] {return getOrCreate( // 根据 hookName 抽取所有符合的插件，运行时收集对应 hook 的插件放进 this.sortedPlugins 里this.sortedPlugins,hookName,() => getSortedValidatedPlugins(hookName, this.plugins, validateHandler) // 抽取插件中有对应 hookName 的插件);
}export function getOrCreate<K, V>(map: Map<K, V>, key: K, init: () => V): V {const existing = map.get(key);if (existing !== undefined) {return existing;}const value = init();map.set(key, value);return value;
}export function getSortedValidatedPlugins(hookName: keyof FunctionPluginHooks | AddonHooks,plugins: readonly Plugin[],validateHandler = validateFunctionPluginHandler
): Plugin[] {const pre: Plugin[] = [];const normal: Plugin[] = [];const post: Plugin[] = [];// 遍历所有插件,根据指定hook(options、transform、...)提取插件for (const plugin of plugins) {const hook = plugin[hookName];if (hook) {if (typeof hook === 'object') {validateHandler(hook.handler, hookName, plugin);if (hook.order === 'pre') {pre.push(plugin);continue;}if (hook.order === 'post') {post.push(plugin);continue;}} else {validateHandler(hook, hookName, plugin);}normal.push(plugin);}}// 根据 pre、normal、post 顺序排序每个hookreturn [...pre, ...normal, ...post];
}

sync hook

  • 同步执行 hook，返回第一个非 null 的结果
	// chains synchronously, first non-null result stops and returnshookFirstSync<H extends SyncPluginHooks & FirstPluginHooks>(hookName: H,parameters: Parameters<FunctionPluginHooks[H]>,replaceContext?: ReplaceContext): ReturnType<FunctionPluginHooks[H]> | null {for (const plugin of this.getSortedPlugins(hookName)) {const result = this.runHookSync(hookName, parameters, plugin, replaceContext);if (result != null) return result;}return null;}

parallel hook

  • 用于并行执行的 hook，忽略返回值
  • 通过 Promise.all 并行执行
	async hookParallel<H extends AsyncPluginHooks & ParallelPluginHooks>(hookName: H,parameters: Parameters<FunctionPluginHooks[H]>,replaceContext?: ReplaceContext): Promise<void> {const parallelPromises: Promise<unknown>[] = [];for (const plugin of this.getSortedPlugins(hookName)) { // getSortedPlugins 根据 hookName 提取对应的插件if ((plugin[hookName] as { sequential?: boolean }).sequential) { // 非顺序执行就先存起来然后并行执行await Promise.all(parallelPromises);parallelPromises.length = 0;await this.runHook(hookName, parameters, plugin, replaceContext);} else {parallelPromises.push(this.runHook(hookName, parameters, plugin, replaceContext)); // 将调用过程放进 Promise.then 任务中，等待 parallelPromises.push 同步任务收集完成后执行}}await Promise.all(parallelPromises); // 并行执行所有收集到的 runHook }

this.runHookSync

  • 同步调用时，通过 this.pluginContexts.get(plugin) 获取到插件上下文供插件开发者使用
	private runHookSync<H extends SyncPluginHooks>(hookName: H,parameters: Parameters<FunctionPluginHooks[H]>,plugin: Plugin,replaceContext?: ReplaceContext): ReturnType<FunctionPluginHooks[H]> {const hook = plugin[hookName]!;const handler = typeof hook === 'object' ? hook.handler : hook;let context = this.pluginContexts.get(plugin)!;if (replaceContext) {context = replaceContext(context, plugin);}try {// eslint-disable-next-line @typescript-eslint/ban-typesreturn (handler as Function).apply(context, parameters);} catch (error_: any) {return error(errorPluginError(error_, plugin.name, { hook: hookName }));}}

this.runHook

  • 异步调用时，如果是结果也是 Promise，会暂存然后等待所有Promise都执行结束
	private runHook<H extends AsyncPluginHooks | AddonHooks>(hookName: H,parameters: unknown[],plugin: Plugin,replaceContext?: ReplaceContext | null): Promise<unknown> {// We always filter for plugins that support the hook before running itconst hook = plugin[hookName];const handler = typeof hook === 'object' ? hook.handler : hook;let context = this.pluginContexts.get(plugin)!; // 获取插件的上下文，上下文通过 PluginDriver 封装了一系列和 graph 等相关的方法if (replaceContext) { //transform 钩子需要往 plugin 上下文中添加额外的内容context = replaceContext(context, plugin);}let action: [string, string, Parameters<any>] | null = null;return Promise.resolve().then(() => {if (typeof handler !== 'function') {return handler;}const hookResult = (handler as Function).apply(context, parameters); // 执行插件对应的 hookName 钩子if (!hookResult?.then) {return hookResult;}action = [plugin.name, hookName, parameters]; // 如果钩子返回 Promise 存储对应操作this.unfulfilledActions.add(action);return Promise.resolve(hookResult).then(result => { // action was fulfilledthis.unfulfilledActions.delete(action!); // 钩子返回 Promise 完成清除对应未 fullfilled 的操作return result;});}).catch(error_ => {if (action !== null) {this.unfulfilledActions.delete(action);}return error(errorPluginError(error_, plugin.name, { hook: hookName }));});}

和 webpack 插件系统区别

  • Rollup 通过抽象化一个 PluginDriver 的实例负责专门驱动插件的调用，并且 PluginDriver 和 Graph 绑定，能够共享打包过程的信息；webpack 通过 tapable 进行订阅发布，本身可以脱离 webpack 使用
  • 在运行模式上，Rollup 是运行时根据 hookName 收集对应的插件 ，然后对插件进行排序后存储，通过 runHook 或 runHookSync 进行调用；webpack 通过订阅发布，先注册插件，然后在生命周期的流程中调用。总的来说 Rollup 的运行时收集比起 webpack 具有一点点内存优势

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/809706.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uniapp 小程序获取WiFi列表

uniapp 小程序获取WiFi列表

<template><view ><button click"getWifiList">获取WiFi列表</button><scroll-view:scroll-top"scrollTop"scroll-yclass"content-pop"><viewclass"itemInfo"v-for"(item, index) in wifiList&…
阅读更多...
网络原理（应用层、传输层）

网络原理（应用层、传输层）

文章目录 一、应用层1.1 自定义协议1.2 通用协议XMLJSONprotobuf 二、传输层2.1 UDP协议2.2 TCP协议协议端格式及解析可靠性机制确认应答超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09;流量控制拥塞控制 效率机制滑动窗口延迟应答捎带应答 粘包问题TCP…
阅读更多...
3月产品更新来袭，快来看有没你期待的功能

3月产品更新来袭，快来看有没你期待的功能

亮点更新一览 增强制作报表易用性&#xff0c;提升用户体验&#xff0c;如仪表盘图层锁定保持原有层级、即席查询支持批量选择表字段。 增强报表展示和分析能力&#xff0c;满足更多项目需求&#xff0c;如仪表盘表格支持配置是否显示分析菜单按钮、Web电子表格新增多选输入…
阅读更多...
Unity（MVC思想）

Unity（MVC思想）

MVC 一下演示使用MVC和不使用MVC的做法区别。 前两个没有使用MVC 主面板逻辑&#xff1a; mainPanel是该脚本名字 每个场景中不一定存在该面板&#xff0c;单纯的显隐需要去手动挂载过于麻烦。 所以自己读取创建面板出来(每个场景仅创建一次)&#xff0c;存下该面板&#xf…
阅读更多...
车载平板丨车载数据终端是什么，如何在农机领域发挥作用

车载平板丨车载数据终端是什么，如何在农机领域发挥作用

车载数据终端是指一种能够获取和处理车辆及其周边环境信息的设备&#xff0c;它集成了GPS导航、行车记录仪、车况诊断、通信等功能&#xff0c;能够实时监测车辆的位置、速度、行驶路线、油耗等数据&#xff0c;为车辆管理和运营提供数据支持。在农机领域&#xff0c;车载数据终…
阅读更多...
C++ //练习 11.16 使用一个map迭代器编写一个表达式，将一个值赋予一个元素。

C++ //练习 11.16 使用一个map迭代器编写一个表达式，将一个值赋予一个元素。

C Primer&#xff08;第5版&#xff09; 练习 11.16 练习 11.16 使用一个map迭代器编写一个表达式&#xff0c;将一个值赋予一个元素。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /*************************************…
阅读更多...
负荷预测 | Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测

负荷预测 | Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于TCN-BiGRU-Attention单输入单输出时间序列多步预测&#xff1b; 2.单变量时间序列数据集&#xff0c;采用前12个时刻预测未来96个时刻的数据&#xff1b; 3.excel数据方便替换&#xff0c;运行环境matlab…
阅读更多...
Ant Desgin Vue Tree Tab 个性化需求

Ant Desgin Vue Tree Tab 个性化需求

背景 个人对前端不是很熟&#xff0c;或者说过目就忘&#xff0c;但是对前端还要求不少&#xff0c;这就难搞了。 使用的前端是Mudblazor和ant design vue, Mudblazor 还没有开始搞&#xff0c;现在先用ant design vue&#xff0c;版本是vue3&#xff0c; ant design vue 4版…
阅读更多...
经典面试：MySQL的锁机制，表级锁和行级锁的使用场景及解决方案

经典面试：MySQL的锁机制，表级锁和行级锁的使用场景及解决方案

大家好&#xff0c;今天我们来聊一聊MySQL中的锁机制&#xff0c;特别是表级锁和行级锁的使用场景和解决方案。锁机制是数据库管理系统中用来确保数据一致性和完整性的重要工具。MySQL为我们提供了多种锁机制&#xff0c;每种锁都有其特定的使用场景和注意事项。 一、MySQL的锁…
阅读更多...
webpack打包携带某个文件到dist目录

webpack打包携带某个文件到dist目录

在 Webpack 配置文件 webpack.config.js 中&#xff0c;可以使用 CopyWebpackPlugin 插件实现将特定文件复制到dist目录&#xff1b;安装 CopyWebpackPlugin 插件&#xff1b; npm install copy-webpack-plugin --save-dev 在 webpack.config.js 中引入 CopyWebpackPlugin 插件…
阅读更多...
CentOS 7下Vim常用工作模式详解

CentOS 7下Vim常用工作模式详解

CentOS 7下Vim常用工作模式详解 在Linux系统中，Vim是一款功能强大的文本编辑器，被广大开发者所青睐。CentOS 7作为广泛使用的Linux发行版，Vim自然也是其标准配置之一。本文将详细介绍CentOS 7下Vim的常用工作模式及其相关命令选项和格式，帮助读者更好地掌握Vim的使用技巧。…
阅读更多...
OSPF 开放式最短路径优先协议

OSPF 开放式最短路径优先协议

目录 技术产生原因&#xff1a;因为RIP存在不足 OSPF优点&#xff1a; RIPV2和OSPFV2比较&#xff1a; 相同点&#xff1a; 不同点&#xff1a; OSPF的结构化部署 --- 区域划分 区域划分的主要目的&#xff1a; 区域边界路由器 --- ABR &#xff1a; 区域划分的要求&am…
阅读更多...
【静态分析】静态分析笔记03 - 数据流分析（应用）

【静态分析】静态分析笔记03 - 数据流分析（应用）

参考&#xff1a; 【课程笔记】南大软件分析课程3——数据流分析应用&#xff08;课时3/4&#xff09; - 简书 ---------------------------------------------------------------------------- 1. 数据流分析总览 may analysis: 输出可能正确的信息&#xff08;需做 over-…
阅读更多...
【感谢】心怀感恩，共赴知识之旅——致每一位陪伴我突破百万总访问量的您

【感谢】心怀感恩，共赴知识之旅——致每一位陪伴我突破百万总访问量的您

小伙伴朋友们&#xff1a; 此刻&#xff0c;我怀着无比激动与深深感激的心情&#xff0c;写下这篇特别的博文。今天&#xff0c;我的CSDN总访问量成功突破了百万大关&#xff0c;这不仅是一个数字的跨越&#xff0c;更是你们对我的支持、信任与鼓励的有力见证。在此&#xff0…
阅读更多...
C语言学习笔记之操作符篇

C语言学习笔记之操作符篇

目录 算术运算符 移位操作符 整型在内存中的存储&#xff08;补充知识&#xff09; ​编辑左移操作符 右移操作符 位操作符 赋值操作符 复合赋值操作符 单目操作符 关系操作符 逻辑操作符 && 与 || 的计算特点 条件操作符 逗号表达式 下标引用操作符 函…
阅读更多...
Bert 将长段分成句子放在一个batch输入

Bert 将长段分成句子放在一个batch输入

from nltk.tokenize import RegexpTokenizersentence """Thomas Jefferson began building Monticello at the age of 26.""" # 按照自己的规则进行分词,使用正则分词器 # \w 匹配字母、数字、下划线 # 匹配任何非空白字符 tokenizer RegexpTo…
阅读更多...
Canal 同步mysql 到es 日期格式报错解决

Canal 同步mysql 到es 日期格式报错解决

第一步&#xff1a;下载源码alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件 (github.com) 第二步&#xff1a;编辑源码&#xff08;client-adapter下面的clinet-adapter.escore)&#xff1a; com.alibaba.otter.canal.client.adapter.es.core.support.ESSyncUt…
阅读更多...
聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗？

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗？

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗&#xff1f; 聚丙烯&#xff08;Polypropylene&#xff0c;简称PP&#xff09;是一种热塑性聚合物&#xff0c;属于聚烯烃类塑料之一。以下是聚丙烯的一些化学特性&#xff1a; 1. 分子结构&#xff1a; 聚丙烯是由丙烯…
阅读更多...
【赛题】2024年MathorCup数学应用挑战赛C题赛题发布

【赛题】2024年MathorCup数学应用挑战赛C题赛题发布

2024年MathorCup数学应用挑战赛——正式开赛&#xff01;&#xff01;&#xff01; C题 物流网络分拣中心货量预测及人员排班 赛题已发布&#xff0c;后续无偿分享各题的解题思路、参考文献、完整论文可运行代码&#xff0c;帮助大家最快时间&#xff0c;选择最适合是自己的赛…
阅读更多...
[CSS]布局

[CSS]布局

盒子就是把网站分割成一小块一小块的吧&#xff0c;然后方便移动或者管理 背景 属性名描述background-color设置元素的背景颜色。background-image设置元素的背景图片。背景图片与背景颜色同时设置时&#xff0c;则图片覆盖颜色。写法如下&#xff1a;background-image: url(&…
阅读更多...
最新文章

Copyright @ 2022~2023