尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

Hermes Parser JS 工具链演进全解析:从 WASM 解析器到 Flow/TS 生态七件套

发布时间:2026/9/24 8:29:24

资讯中心
01
ARTICLE

Hermes Parser JS 工具链演进全解析:从 WASM 解析器到 Flow/TS 生态七件套

Hermes Parser JS 工具链演进全解析:从 WASM 解析器到 Flow/TS 生态七件套
语言运行时编译器移动开发【免费下载链接】hermesA JavaScript engine optimized for running React Native.项目地址https://gitcode.com/gh_mirrors/hermes/hermes点击查看免费下载导读本篇文章围绕 tools/hermes-parser/js/CHANGELOG.md 记录的0.9.0至0.37.0版本演进系统梳理 Hermes 引擎 JavaScript 工具链中七个 npm 包的定位、核心 API 与关键能力。文章既覆盖hermes-parser的完整解析选项与各包之间如何协同也结合仓库源码与各包 README 说明其底层原理帮助读者理解这套基于 C 编译器编译为 WebAssembly 的解析与转换体系并能在 ESLint、Babel、Prettier 等真实工具链中直接落地使用。一、包结构总览一个引擎七个 npm 包Hermes 引擎本身是面向 React Native 优化的 JavaScript 引擎其解析器由 C 编写。tools/hermes-parser/目录展示了这套体系的服务端构成hermes-parser-wasm.cpp 负责将 C 解析器编译为 WASMHermesParserJSSerializer.cpp 负责将解析结果序列化为 JS 对象HermesParserDiagHandler.cpp 负责诊断信息收集。而tools/hermes-parser/js/下的 package.json 是一个 Yarn workspaces 管理的一体化 JS 仓库由七个发布到 npm 的包组成包名职责定位hermes-parser核心解析器暴露parse(code, options)API可解析 ES6、Flow、JSXhermes-estreeHermes 解析器产出的 Flow-ESTree 规范的 Flow 类型定义hermes-transformAST 遍历与变换工具可配合 Prettier 打印源码hermes-eslintESLint 自定义解析器Flow 代码 lint 的推荐选择flow-api-translator将 Flow 代码翻译为 Flow 定义.flow或 TypeScript 定义.d.tsprettier-plugin-hermes-parserPrettier 插件让 Prettier 使用 Hermes 解析器打印代码babel-plugin-syntax-hermes-parserBabel 插件让 Babel 用hermes-parser替代babel/parserChangelog 中每个版本均按这些包的维度组织条目因此理解这七者的分工是读懂后续所有版本演进的前提。二、hermes-parserWASM 化的核心解析器2.1 单个parse函数与完整配置项hermes-parser的对外 API 只有parse(code, options)一个函数其完整参数说明见 tools/hermes-parser/js/hermes-parser/README.mdbabelboolean默认false。为true时输出符合 Babel AST 格式的 AST否则输出符合 ESTree 格式的 AST。allowReturnOutsideFunctionboolean默认false。为true时不报函数外出现 return 语句的错误。flowall或detect默认detect。设为detect时仅在文件存在flowpragma 的情况下将歧义语法解析为 Flow 语法设为all则无论是否存在 pragma 都按 Flow 语法解析。例如fooT(x)在无flow注释且为detect时会被解析为两次比较运算而设为all或带 pragma 时会被解析为带类型参数调用。sourceFilenamestring默认null。非空时该文件名会被写入 AST 中所有源码位置信息。sourceTypemodule、script或unambiguous默认。unambiguous模式下若代码中出现 ES6 import/export 则自动判定为module否则为script。tokensboolean默认false。为true时将所有 token 追加到根节点的tokens属性上。transformOptionsobject供相关 transform 使用。目前包含TransformEnumSyntaxenableboolean是否启用 Flow Enums 语法变换默认falsegetRuntime可选() Expression返回指向 Flow Enums 运行时的表达式默认require(flow-enums-runtime)。2.2 为什么快C 编译为 WASMbabel-plugin-syntax-hermes-parser的 README 明确说明Hermes parser uses C compiled to WASM it is significantly faster and provides full syntax support for Flow。也就是说解析核心不是 JS 实现的递归下降解析器而是 Hermes 引擎自带的高性能 C 解析器通过 Emscripten 编译为 WASM 后在浏览器/Node 环境中运行。Changelog 0.16.0 中Upgrade to latestemscripten(3.1.44 from 3.1.3)这一条也印证了 WASM 工具链的持续升级0.12.0 中Fixprocess.exitCodebeing overridden when initializing WASM则说明 WASM 初始化阶段对宿主环境的侵入也被仔细处理过。2.3 语法能力随版本持续扩张从 changelog 可以清晰看到解析器对语法支持不断追平 Flow 与 ECMAScript 前沿特性的过程Flow 类型系统0.11.0支持keyof、条件类型ConditionalTypeAnnotation、InferTypeAnnotation、映射对象类型属性ObjectTypeMappedTypeProperty、类型谓词TypePredicate、DeclareEnum类型节点独立化0.33.0unknown、never、undefined类型解析为独立节点UnknownTypeAnnotation、NeverTypeAnnotation、UndefinedTypeAnnotation协变/逆变注解0.35.0/0.36.0支持readonly以及writeonly、in T、out T长格式类型参数变型记录与模式匹配0.33.0/0.26.0/0.28.0解析 record 声明与表达式、match实例模式以及持续迭代的实验性 Flow 模式匹配支持声明语法0.11.0DeclareVariable新增kind属性var/let/constDeclareEnum支持解析JSX 增强0.11.0/0.31.2支持 JSX 元素中的类型参数、含-的 JSX 标识符TC39 新语法0.34.0解析 decoratorsimport ... with取代import ... assert新增async hook与async component语法0.21.0 起支持as const、不精确元组[...]、bigint 成员的 Flow Enums、单边类型守卫implies x is T。同时 AST 结构也在向 ESTree/Flow 规范对齐例如 0.29.0 将ImportExpression的attributes字段重命名为options0.33.0 将TupleTypeAnnotation.types重命名为elementTypes、superTypeParameters重命名为superTypeArguments——这类破坏性重命名正是为了与 Flow parser 及 ESTree 规范保持一致。三、hermes-estree类型层的地基hermes-estree提供Flow types for the Flow-ESTree spec produced by the hermes parser见 tools/hermes-parser/js/hermes-estree/README.md即对解析器产出的 AST 节点的 Flow 类型定义。changelog 中该包的改进反映了类型精度的持续打磨谓词与判断函数0.10.0新增isExpression、isStatement谓词函数0.23.0 采纳单边类型守卫implies x is T父节点强类型0.9.0为小规模父节点集合的节点提供显式类型化的parent可选链字段0.11.0修正MemberExpression在 Flow 中正确暴露optional属性精确联合类型0.16.0改进DestructuringObjectPropertyWithShorthandStaticName、ExportNamedDeclarationWithSpecifiers、ObjectTypeAnnotation、BigIntLiteral等节点的类型变型字段扩展0.35.0/0.36.0先新增readonly再新增writeonly、in、out到 variance kind 类型中。由于hermes-eslint、hermes-transform等都依赖这套类型定义做作用域分析与变换hermes-estree的类型正确性是整个工具链安全的基石。四、hermes-transform可预测的 AST 变换4.1 设计理念遍历可读、变换可控hermes-transform是traversing and transforming a hermes AST的包其 README 表明它借鉴了babel/traverse、eslint、prettier 三者的实现思路。与直接允许遍历中原地改 AST 的SimpleTransform不同hermes-transform只在遍历结束后统一应用变更changelog 0.10.0 明确指出这种end-only模式much easier to reason about but limits what can be achieved。4.2 核心 API 演进transform 主 API0.10.0新增parse、print两个导出。parse在调用hermes-parser之后额外执行注释挂接与 docblock 属性设置print则通过 Prettier 由 AST 生成源码并完成 docblock 重新挂回为普通注释等准备动作。控制遍历0.10.0stopTraversal中止整个遍历skipTraversal跳过当前节点的子树但继续遍历0.9.0 还提供modifyNodeInPlace直接修改节点内部隐式 clone。克隆语义0.9.0大部分 API 会自动对传入节点做浅克隆使显式克隆基本不再必要同时导出MaybeDetachedNode类型与asDetachedNode函数。注释工具0.11.0导出makeCommentOwnLine让新增注释打印时独占一行0.17.1 修复了可选链节点注释保留问题。Program 级修改0.23.0context.modifyInPlace允许直接修改 Program 节点本身此前依赖replaceNode无法修改 Program。节点构造器0.10.0提供t.Program({...})这样的节点生成器可自底向上构造完整 AST。docblock 的处理细节值得注意0.10.0 起 docblock 不再挂接到第一个语句而只通过 Program 节点的docblock属性访问避免首语句被移动时注释被复制0.23.1 修复了空body docblock 注释打印时报错的问题。五、hermes-eslintFlow 代码 lint 的推荐解析器hermes-eslint是 ESLint 的自定义解析器官方 README 称其为the recommended parser for use for linting with Flow code并给出两种配置方式见 tools/hermes-parser/js/hermes-eslint/README.mdFlat configeslint.config.js将require(hermes-eslint)设为languageOptions.parser解析选项通过languageOptions.parserOptions传入Legacy config.eslintrc将hermes-eslint设为parserparserOptions直接写在配置对象中。其ParserOptions类型定义包含jsxPragmaJSX 元素创建转译后所用的标识符须为根标识符而非成员表达式用React而非React.createElement显式设为null可启用新的全局 JSX transform默认ReactjsxFragmentNameJSX fragment 标识符默认null假定用jsxFactory的成员如React.FragmentsourceTypescript | module默认modulefbt忽略fbt /JSX 元素对模块级React变量的引用计数FBT 会转译为非 JSX引用方式不同。changelog 中该包的重点集中在作用域分析的完善0.18.0 将 JSX 闭合元素纳入作用域/绑定引用0.19.1 支持DeclareNamespace节点的作用域分析0.20.1 支持带类型参数的typeof节点0.22.0 修复映射类型的作用域分析0.9.0 处理 FBT 的fbs标签与函数类型this参数0.17.1 确保AsExpression中的类型转换被视为已引用。作用域分析的正确性直接决定no-unused-vars等规则在 Flow 代码上的可信度。六、flow-api-translatorFlow 到 TS 定义的双向翻译flow-api-translator诞生于 0.10.0其定位是translating Flow code into either Flow definitions or TS definitions along with generating the non typed runtime code目的是帮助 Flow 库作者同时支持 TS 与 Flow 代码库的使用。需注意该包的后续开发已迁移至 facebook/flow 仓库见 tools/hermes-parser/js/flow-api-translator/README.md。changelog 中该包的演进有几个清晰的脉络React 类型体系从 0.11.0 开始逐步支持React.ElementConfig、React.Key、React.Ref、React.Component、React.ElementType、React.ChildrenArray并改进React.ComponentType、React.AbstractComponent0.21.1 支持三参数形式0.25.0 支持React.RefSetter并移除错误的React.Ref翻译0.28.0 翻译到ComponentRef替代废弃的ElementRef0.27.0 改用React.JSX命名空间。Flow 工具类型翻译0.19.0 让$ReadOnlyMap/$ReadOnlySet与 Flow API 对齐为两个类型参数0.15.0 移除已删除的$Shape、$Partial0.23.0 将StringPrefixfoo译为foo${string}、StringPrefixfoo, T译为foo${T}0.28.0 支持$ArrayBufferView。错误恢复策略0.11.0对不支持的 Flow 语法不再整体退出而是将大多数错误以注释形式输出到生成的 TS 代码中并给出合适的类型回退。通用类型结构0.16.0 支持条件类型、类型守卫、infer、映射对象类型0.15.0 支持元组带标签与 spread 元素、ExportAllDeclaration0.18.1 输出类型守卫代替%checks。与 Prettier 的绑定0.13.0 起切换为始终使用prettier-plugin-hermes-parser打印以支持最新 Flow 语法0.30.0 修复 Prettier v3 支持0.37.0 要求 Prettier v3 并输出TSImportType.source为$Exports而生。七、prettier-plugin-hermes-parser让打印追上解析该插件的用途是让 Prettier 以 Hermes 解析器解析 Flow 代码并打印从而支持 Prettier 官方插件尚未跟上的最新 Flow 语法。README 中的配置方式见 tools/hermes-parser/js/prettier-plugin-hermes-parser/README.md// .prettierrc { plugins: [prettier-plugin-hermes-parser], overrides: [ { files: [*.js, *.jsx, *.flow], options: { parser: hermes } } ] }关键版本节点0.12.0 创建同时支持 Prettier v3 与 v2但打印逻辑始终走最新的 Prettier v3以完整支持 Hermes parser 的全部特性0.12.1 性能优化插件懒加载未使用时零性能影响从内置 Prettier v3 bundle 中剥离 Flow parser缩短插件初始化时间0.13.0 修复上游缺陷修补 Prettier 打印hermes-transform产出的数组时无限递归的问题0.31.0 移除 Prettier v2与hermes-transform同步放弃 v20.37.0 新方向hermes-transform改为直接用 Prettier 内置的 Flow 与 TypeScript 插件打印仅在需要时按需加载prettier-plugin-hermes-parser。八、babel-plugin-syntax-hermes-parser接管 Babel 的解析阶段该包创建于 0.13.0将 Babel 的解析器从babel/parser替换为hermes-parser从而获得更快的解析速度与完整的 Flow 语法支持C 编译为 WASM。用法见 tools/hermes-parser/js/babel-plugin-syntax-hermes-parser/README.mdnpm install --save-dev babel-plugin-syntax-hermes-parser # 或 yarn add babel-plugin-syntax-hermes-parser --dev// babel.config.json { plugins: [babel-plugin-syntax-hermes-parser] }需要向解析器传参时使用parserOpts// babel.config.json { plugins: [babel-plugin-syntax-hermes-parser], parserOpts: { allowReturnOutsideFunction: true } }该插件值得注意的边界处理0.18.1 起不对 TS 文件启用插件0.25.1 新增parseLangTypes选项跳过非 Flow 文件0.20.1 支持 Babel 8 beta。九、贯穿版本的工程质量与破坏性变更从 changelog 可总结出几条贯穿始终的工程主线破坏性重命名均为对齐生态attributes→options、types→elementTypes、superTypeParameters→superTypeArguments以及falseTYpe→falseType0.11.0 修正 TS 节点拼写错误都是为了与 ESTree/Flow parser 规范保持一致。babel 模式输出持续对齐0.16.0 对 babel 支持基础设施做了重大重构使 transform 更安全容易且输出更贴近babel/parser0.15.0 将MethodDefinition正确转为ClassPrivateMethod0.13.0 剥离PropertyDefinition节点上 TS 专用的tsModifiers。依赖治理严苛0.10.1 移除对hermes-eslint的未声明依赖以避免模块找不到错误0.15.0 为hermes-transform增加prettier-plugin-hermes-parser的 peer dependency0.11.1 修复依赖版本。配置默认值的安全设计0.33.2 将 Flow Enums transform 改为默认关闭需显式传入transformOptions: {TransformEnumSyntax: {enable: true}}0.23.0 为hermes-parser新增reactRuntimeTarget配置默认18设为19时不再为函数组件添加forwardRef包装因为 React 19 将 ref 视为普通 prop。十、如何在当前仓库中深入验证解析选项完整阅读 tools/hermes-parser/js/hermes-parser/README.md 中的参数表WASM 构建链路查看 tools/hermes-parser/CMakeLists.txt、hermes-parser-wasm.cpp 与 HermesParserJSSerializer.cpp了解 C 解析器如何序列化给 JS 消费测试用例tools/hermes-parser/js/tests/ 与各包内__tests__目录中的快照测试是理解各类 Flow 语法在 AST 中具体形态的最佳入口作用域分析实现tools/hermes-parser/js/hermes-eslint/src/scope-manager/README.md 说明 ESLint 作用域分析的内部结构monorepo 构建与测试tools/hermes-parser/js/package.json 中的build./scripts/build.sh、lint、flow、test脚本展示了整套工具的工程化流程。结语从 0.9.0 到 0.37.0Hermes parser 的 JS 工具链完成了一次解析能力追平语法、打印能力追平解析的螺旋式演进以 WASM 化的hermes-parser为核心hermes-estree提供类型地基hermes-eslint与babel-plugin-syntax-hermes-parser将解析能力注入主流工具链hermes-transform与prettier-plugin-hermes-parser支撑代码变换与格式化flow-api-translator打通 Flow 与 TypeScript 之间的类型翻译。理解这七件套的分工与版本脉络无论是排查解析问题、接入 ESLint/Babel/Prettier还是实现自己的 AST 变换都能做到有据可依。赞分享语言运行时编译器移动开发【免费下载链接】hermesA JavaScript engine optimized for running React Native.项目地址https://gitcode.com/gh_mirrors/hermes/hermes点击查看免费下载相关推荐Hermes Parser JS 包开发指南WASM 解析器的构建、测试与包结构全解析Hermes Parser JS 包开发指南WASM 解析器的构建、测试与包结构全解析 本指南以 tools/hermes parser/js/CLAUDE.语言运行时编译器移动开发Hermes 引擎的 Prettier 插件 prettier-plugin-hermes-parser 演进解析Flow 前沿语法格式化与版本兼容全指南Hermes 引擎的 Prettier 插件 prettier plugin hermes parser 演进解析Flow 前沿语法格式化与版本兼容全指南 导语言运行时编译器移动开发AssetRipper工具链配套工具生态全面解析AssetRipper工具链配套工具生态全面解析 AssetRipper作为Unity资源提取领域的标杆工具其强大之处不仅在于核心的资产提取能力更在于其完开发工具逆向工程游戏开发创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。