BestHub
Sign in
Tag

Code Transformation

1 views collected around this technical thread.

vivo Internet Technology
vivo Internet Technology
Jan 22, 2025 · Frontend Development

Developing a Babel Plugin to Automatically Add Optional Chaining (?.) and Prevent TypeError

The article explains how to create a custom Babel plugin that automatically transforms risky member and call expressions into optional‑chaining equivalents during bundling, using configurable include/exclude patterns and short‑circuit optimizations, thereby preventing TypeError in large JavaScript codebases while noting a modest bundle‑size increase.

BabelCode TransformationJavaScript
0 likes · 14 min read
Developing a Babel Plugin to Automatically Add Optional Chaining (?.) and Prevent TypeError
IT Services Circle
IT Services Circle
May 1, 2022 · Frontend Development

A Comprehensive Guide to AST and Babel for JavaScript Code Transformation

This article provides an in‑depth tutorial on Abstract Syntax Trees (AST) and the Babel toolchain, covering AST fundamentals, its role in compilation, and practical examples of parsing, traversing, modifying, and generating JavaScript code using @babel/core, @babel/parser, @babel/traverse, @babel/generator, and @babel/types.

ASTBabelCode Transformation
0 likes · 24 min read
A Comprehensive Guide to AST and Babel for JavaScript Code Transformation
Sohu Tech Products
Sohu Tech Products
Jun 24, 2020 · Frontend Development

Understanding Abstract Syntax Trees (AST) and Their Applications in JavaScript Tooling

This article explains what an Abstract Syntax Tree (AST) is, how JavaScript code is parsed into ASTs, the processes of lexical and syntactic analysis, and demonstrates practical AST manipulation using tools like Esprima, Estraverse, Escodegen, and Babel to transform code such as renaming functions, converting arrow functions, and implementing on‑demand imports.

ASTBabelCode Transformation
0 likes · 31 min read
Understanding Abstract Syntax Trees (AST) and Their Applications in JavaScript Tooling
58 Tech
58 Tech
May 18, 2020 · Frontend Development

Automating React 15 to React 16 Upgrade Using Abstract Syntax Tree (AST)

This article presents a practical solution for automatically upgrading legacy React 15 projects to React 16 by generating, modifying, and re‑generating code through Abstract Syntax Tree (AST) transformations, detailing the required steps, common pitfalls, and broader applications of AST in frontend engineering.

ASTBabelCode Transformation
0 likes · 10 min read
Automating React 15 to React 16 Upgrade Using Abstract Syntax Tree (AST)
政采云技术
政采云技术
Mar 1, 2020 · Frontend Development

Understanding Babel: Core Principles, Configuration, Plugins, and Polyfills for Frontend Development

This comprehensive guide explores the core principles and practical applications of Babel, a JavaScript compiler essential for modern frontend development, detailing its AST-based transformation process, configuration methods, plugin and preset ecosystems, polyfill strategies, and runtime optimization techniques to ensure cross-browser compatibility and efficient code compilation.

ASTBabelCode Transformation
0 likes · 17 min read
Understanding Babel: Core Principles, Configuration, Plugins, and Polyfills for Frontend Development
Qunar Tech Salon
Qunar Tech Salon
Dec 13, 2018 · Frontend Development

Understanding Babel: History, Usage, and Custom Plugin Development

This article introduces Babel as a popular JavaScript compiler, explains its origin, demonstrates basic installation and configuration, shows how arrow functions are transformed, and guides readers through creating a simple custom Babel plugin using visitors and AST manipulation.

ASTBabelCode Transformation
0 likes · 10 min read
Understanding Babel: History, Usage, and Custom Plugin Development
Qunar Tech Salon
Qunar Tech Salon
Jul 18, 2018 · Frontend Development

Converting React Class Components to Miniapp Component Calls Using Babel Plugins

This article explains how to transform React class components into WeChat Mini‑Program Component({}) calls by building a custom Babel plugin that extracts class inheritance, methods, state handling, and replaces import/export statements, while also mapping React lifecycle patterns to Mini‑App equivalents.

BabelCode TransformationJavaScript
0 likes · 9 min read
Converting React Class Components to Miniapp Component Calls Using Babel Plugins