Rollup hooks 进阶

hooks.png

resolveId :做路径解析,比如我 import foo from 'foo'; 要去找这个 foo 文件究竟在哪里。还有一个虚拟模块(Virtual Module)的概念,就是 resolveId 不是返回的一个真实的文件而是一个虚拟的 module。虚拟模块很有用,rollup 中很多功能都是用虚拟模块实现的,虚拟模块id约定都以 \0 开头,这样告诉其它插件不要去 load 和 transform 这些模块。
load :读取文件,默认实现是从文件系统中读取,虚拟模块一般都要重写 load, 因为虚拟模块一般不对应真正的文件。
transform: 对文件内容进行转换,如把 ts 编译为 js。就是 webpack 中 loader 的概念。
moduleParsed: 在一个模块完全解析完毕时回调(就是这个文件的所有依赖已经找到,所有 transfrom 也已经执行完毕)
buildEnd: 在所有模块及其依赖都已经解析完毕时回调,这时整个Graph(依赖图)图里的结点都已经处理完毕,下一步就可以输出 bundle 了。在这里可以拿到所有解析完毕的 module。

buildEnd() {
    const moduleIds = this.getModuleIds();
    for(let id of moduleIds) {
        const module = this.getModuleInfo(id);
    }
}

moduleParsed 每解析完一个文件都会回调一次, 而buildEnd 只会调用一次。

build hooks.png

黄色的 hooks 是 first (resolveId, load 等)类型的,如果多个插件都注册了 first 类型的钩子,前面插件的钩子如果返回非 null, 后面插件的钩子就不会执行了,具有截断功能。
sequential: 顾名思义,按插件注册顺序依次执行,即使前面插件有 async 的钩子也要等 async 函数 resolve 后,后面插件的钩子才会执行。
parallel: 如果有 async 的钩子,这些 async 函数是并行调起的,后面插件的钩子不会等前面插件的钩子先 resolve。
order: pre/post 可以改变插件钩子的执行顺序, pre 第一个执行, post 最后一个执行。如果有多个插件都使用了 pre/post 再按照插件的注册顺序排序。

meta.png

插件可以在 module 中添加 meta 信息供其它插件使用。

custom options.png

插件中可以通过手动调用 this.resolve() 方法来添加用户自定义的 optison 信息供其它插件使用。
如 commonjs 插件会添加 commonjs:{isCommonJS}, isCommonJS 表示模块是否是 cjs。
node-resolve 插件会添加 {"node-resolve":{"resolved":"id"}}。
基本每个 rollup 项目都会添加这两个插件,我们可以在自己的插件中使用这些 options。

resolve.png

this.resolve() 函数的作用: 前面说过通过手动调用 this.resolve() 可以添加自定义的 options。 resolve() 会把所有插件的 resolveId 钩子重新调用一遍,包括当前插件自己。skipSelf:true 参数可以跳过当前插件的 resolveId 。 你能想到在 resolveId 中调用 this.resolve() 如果不 skipSelf 很容易死循环。
commonjs 和 node-resolve 里面都主动调用了 this.resovle() 来添加自定义的 options , node-resolve 中也没有 skipSelf 而是自己处理了死循环的情况。

node-resolve 插件和 commonjs 插件谁应该写在前面谁应该写在后面???
答案是都行

commonjs.png

commonjs 无论你写在哪里都会自己把自己的 resolveId 作为一个独立插件插入到第一个位置。因为 resolveId 是 first 类型的容易被别的插件拦截,这样 commonjs 就处理不到了。

node-resolve.png

node-resolve 插件的 resolveId 是 post 类型的,会最后一个执行。你自己插件的 resolveId 一般都是在 node-resolve 之前执行的。如果你也用 post 然后挂在 node-resolve 之后你的resolveId 才能在 node-resolve 后面执行。但这样你的 resolveId 大概率不会回调,因为 node-resolve 插件实现了经典的 node 路径解析算法,大部分的路径 node-resolve 都能解析到, 这也是 node-resolve 默认最后一个 resolveId 的原因。


perf:true 配置可以对各个构建阶段进行打点统计,在进行性能分析时很有用。


Rollup 设计挺好的,我都想用 Rust 重写一个 Rollup 。为什么不用 C/C++, 想用 Rust 主要是 Rust 生态还行,有 swc 等轮子可以复用,毕竟我也不会重头写 js ast 解析等高级功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • https://www.rollupjs.com/[https://www.rollupjs.com/] roll...
    JunChow520阅读 1,232评论 0 2
  • 本文涉及包版本:node 11.6.0 、npm 6.11.3、webpack 4.39.3;使用mac开发; 项...
    前端gogogo阅读 7,676评论 2 6
  • 0 HTML5相关 websocket WebSocket 使用ws或wss协议,Websocket是一个持久化的...
    可爱多小姐阅读 851评论 0 0
  • 前沿 置身世外只为暗中观察!!!Hello大家好,我是魔王哪吒!重学巩固你的Vuejs知识体系,如果有哪些知识点遗...
    lessonSam阅读 1,164评论 0 13
  • 废话少说,本文分四个部分,css、js、知识点一、知识点二、React(部分问题没有给出答案,后续更新) css面...
    666同学阅读 1,088评论 0 0