The Different Transformation Stages of AOT Compilers
summary
Walks through concrete stages: parsing with babel parser into an AST (demonstrated in AST Explorer), regenerating with @babel/generator, and traversing with babel-traverse to apply transformations. Shows Node.js demos that parse a string, mutate nodes, and emit code; uses the env preset to target ES5. Presents two working Babel plugins: one that auto-inserts useMemo/useCallback style optimizations and one that rewrites styled‑component class names for encapsulation, with live demos proving they transform and reduce runtime work.
AI-written summary · about
chapters (10)
- 0:00Start
- 4:21Backward Compatibility
- 6:54What Are the Stages of the Compilation
- 7:27Parsing
- 12:13Babel Parser
- 12:41Plugins
- 14:00Demonstration in a Node Js Application
- 17:05Optional Stage
- 23:13Traverse Function
- 25:32Babel Plugin
related talks
20mJavaScript Transformation
31mAST à la Vista, Baby
26mMagical land of AST's with babel plugins
38mThe magical land of AST's with babel, eslint and codemods
43mJavaScript ❤ binary data
01h 09mBabel: A refactoring tool
20mThey see me refactorin'. They hatin'
22mHow Linters, Compilers & Other Cool Things Work