This article explains Babel's role as a fundamental JavaScript compiler, detailing its parsing‑transform‑printing pipeline, AST structure, core‑js polyfills, preset‑env configuration, and runtime helpers, providing frontend developers with a comprehensive guide to mastering Babel's ecosystem and optimizing bundle size.
This article explains what an Abstract Syntax Tree (AST) is, outlines its parse‑transform‑generate workflow, and demonstrates practical AST‑based code transformations using Babel, custom ESLint rules, and a JSX‑to‑object Babel plugin, complete with example code and visual illustrations.
This tutorial walks through using the TypeScript compiler (tsc) together with tscpaths and AST manipulation tools like jscodeshift to resolve path aliases, copy static assets, and convert style imports from SCSS/LESS to CSS when packaging a frontend library for npm distribution.
The Haro Mobility front‑end team tackled the challenge of maintaining three separate mini‑programs by adopting Taro 3.0 and a custom Babel‑based converter, cutting development effort from 127.5 person‑days to a month of work with four engineers and achieving a 1.4× productivity gain.
This article explains how to use codemod tools, especially jscodeshift, to automatically refactor a growing frontend codebase by replacing a monolithic constants package with per‑constant imports, covering the underlying AST concepts, step‑by‑step script creation, and practical CLI usage.
This article explains how to create and run a jscodeshift codemod that transforms imports of a bulky constants package into per‑constant imports, reducing bundle size in large frontend codebases by leveraging AST parsing, AST Explorer, and automated code modifications.
This article examines the challenges of enforcing JavaScript coding standards in large‑scale frontend projects and presents EOS-JS, an AST‑driven static analysis tool that offers modular scanning, automatic fixes, multi‑scenario rule sets, seamless CI integration, and visualized data reporting to improve code quality and maintainability.
This article explains how EOS‑JS, a plugin‑based static analysis tool, uses AST pattern matching to enforce JavaScript coding standards across large front‑end teams, offering automatic fixes, multi‑scenario rule sets, seamless integration, and visualized data statistics to improve code quality and maintenance efficiency.
The article introduces EOS‑JS, a plugin‑driven JavaScript static analysis platform that leverages AST pattern matching to detect, suggest fixes, and automatically repair code‑style violations across large‑scale frontend projects, detailing its architecture, core modules, dynamic configuration, automation, and data‑visualization capabilities.
This article describes how the JAYE 2.0 project at Beike leverages abstract syntax tree (AST) generation, a custom runtime interpreter, and Dart VM execution to achieve high‑performance, hot‑fixable dynamic updates for Flutter applications, addressing packaging, hot‑reload, and scalability challenges.
This article describes how to collect commit data from five popular Python GitHub repositories with Pydriller, parse source files into abstract syntax trees, extract standard library imports, compare pre‑ and post‑commit usage, and visualize the ten most frequently used standard libraries.
The article explores Tencent's Nocalhost cloud‑native development tool and proposes a new "Water" code architecture that stores programs as language‑agnostic intermediate representations like AST, enabling real‑time, language‑independent development environments and finer‑grained permission control.
The article outlines a tool that converts React JSX into a Svelte abstract syntax tree by stripping framework‑specific features, mapping elements, attributes, mustache templates and function JSX, translating control structures, providing a compatibility “svelte‑hooks” layer, handling ECMA‑AST differences and CSS, noting larger bundle size but potential for further static compilation and optimization.
This article explains the fundamentals of SQL parsing, covering lexer and parser mechanisms, context‑free grammar concepts, LL(1) and LR(1) parsing techniques, and demonstrates how Apache ShardingSphere implements a flexible, multi‑dialect SQL parser with features such as formatting, parameterization, and extensibility.
This article outlines a step‑by‑step approach to creating a front‑end automated refactoring tool, covering AST parsing, defining code smells, detection, suggested fixes, implementation of codemods, and practical examples for Vue, JavaScript, TypeScript, CSS, and framework‑specific utilities.
This article details the evolution of front‑end asset‑loss (资损) prevention at Alibaba, from manual pre‑play rehearsals to productized solutions such as front‑back reconciliation, AST‑based static code scanning with Babel, and record‑playback UI test scanning, highlighting challenges, implementations, and future directions.
This article explains how the open‑source AspectD library enables Aspect‑Oriented Programming in Flutter by modifying the app.dill intermediate file, covering Flutter's compilation process, AST manipulation, point‑cut designs, code conversion flow, and practical use cases such as performance monitoring and page‑view tracking.
This article explains how Vue single‑file components are compiled into render functions and staticRenderFns, and provides a step‑by‑step method to reverse‑engineer the compiled JavaScript back into the original template, style, and script sections using AST parsing, transformation, and code generation techniques.
This week’s WecTeam frontend roundup covers Meituan’s Flutter dynamic system (Flap) that unifies DSL and runtime for faster releases, the official launch of ES2020 (ES11) adding ten new JavaScript features, and a low‑cost AST‑based code‑scanning technique for detecting financial‑loss risks in source code.
This article explains how visualizing logical processes accelerates information comprehension, describes visual programming concepts, contrasts classic and visual development models, outlines the advantages of logic visualization, and details the implementation steps—including node operations, AST generation, and code synthesis—supported by illustrative code snippets.
This article explains how the Taobao front‑end team leveraged Abstract Syntax Tree (AST) analysis with Babel to automatically detect risky code patterns—such as default price assignments, improper calculations, and hard‑coded promotional messages—during the 618 promotion, thereby preventing financial loss and public backlash.
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.
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.
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.
This article explains how to create a Babel plugin that removes console calls in production builds while extending console methods with styled output and source location information in development, covering installation, configuration, AST manipulation, option validation, and comprehensive testing using TypeScript, ts‑mocha, and chai.
This article explains the motivation, design, implementation, and deployment of a Kotlin static‑analysis IDE plugin that provides real‑time code‑style checks for Android developers, covering tool exploration, AST/PSI parsing, rule creation, architecture layers, and practical installation steps.
This article explores why Python’s for‑loop index variables remain visible after the loop, examines the underlying bytecode and AST handling, and explains why this behavior persists and can be useful in real‑world code.
The Gaode App full‑chain dependency analysis system parses source code across JS, C++, Android and iOS into ASTs, extracts forward and reverse dependencies, stores them for GraphQL queries, and uses the data to guide regression testing, API deprecation, migration trends, and package‑size optimization, improving codebase governance.
The article describes how to enforce architectural rules and assess change impact in a modularized JavaScript application by extracting import statements via AST, building a file‑map, constructing a cycle‑aware dependency graph with indexed nodes, and traversing it with a visited‑stack to support forward and reverse analysis across business and public bundles.
This tutorial walks through constructing a JavaScript arithmetic parser using a finite‑state lexer, a stack‑based parser that builds an abstract syntax tree (AST), and an evaluator that supports numbers, operators, parentheses, vectors, and custom symbols like @rot and @dot, complete with visual demos.
This article explains how to implement a lexical analyzer in JavaScript that tokenizes simple arithmetic expressions by using a finite state machine, covering the conversion from infix notation to an abstract syntax tree, token definitions, state transitions, and complete source code examples.
This article explains how to transform raw HTML strings into a structured abstract syntax tree (AST) using JavaScript regular expressions and a step‑by‑step parsing algorithm, covering tag, attribute, and text node handling, with a complete example implementation of a lightweight AST parser.
This article explains the inner workings of Babel, the JavaScript compiler, outlines what syntax it transpiles versus what requires polyfills, describes its three compilation stages, demonstrates AST generation and tokenization, and provides step‑by‑step examples of creating simple Babel plugins for code transformation.
This article explains how to use AST in JavaScript by introducing three essential components—a parser, a traverser, and a code generator—showcasing practical examples with esprima and Babel to parse, modify, and regenerate code, and exploring advanced use cases such as removing console statements, variable obfuscation, arrow‑function conversion, tree‑shaking, and generating SVG flowcharts, while also highlighting AST applications in other languages.
Understanding JavaScript's Abstract Syntax Tree (AST) is crucial for modern code analysis, enabling tools like Babel, ESLint, and Webpack to parse, transform, and generate code beyond regex, with a clear process from lexical analysis to syntax analysis and standardized specifications such as ESTree.
Metaprogramming in Dart leverages the Dill intermediate representation and its abstract syntax tree to programmatically generate, transform, or inject code at compile time, enabling features such as custom serialization, AOP hooks, and reflection‑like capabilities without runtime overhead.
This article explains what an Abstract Syntax Tree (AST) is, its role in JavaScript tooling such as Babel, UglifyJS, and type checking, details the lexical and syntactic analysis stages of AST generation, and demonstrates a practical Babel plugin example that modifies console output using visitors.
The article describes a pipeline that converts a Vue component into a React component by parsing the template, script and style with vue‑template‑compiler and Babel, traversing the AST to map Vue data, props, computed, methods and lifecycle hooks to React state, defaultProps and lifecycle methods, and generating JSX from directives such as v‑if, v‑for and event bindings, thereby reducing rewrite effort and supporting targets.
The article presents JD.com's ARES cross‑platform mobile development suite, its five product modules, and the ARES Mini‑Program Conversion Tool that uses AST manipulation and a custom mini‑React runtime to transform React Native code into WeChat Mini‑Program code, covering installation, usage, component alignment, third‑party integration, routing, animation, and conversion constraints.
The article presents ARES, JD.com's cross‑platform mobile application framework comprising Engines, Websites, Studio, Store, and Console, and details its mini‑program conversion tool that bridges ARES Engines with WeChat mini‑programs through command‑line usage, AST manipulation, runtime integration, component alignment, third‑party library support, routing, animation, and conversion constraints.
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.
Hades is a self‑developed static‑analysis framework for Meituan‑Dianping’s large‑scale iOS codebases that leverages Clang/LLVM to build a high‑level semantic model, enabling global, incremental checks, custom lint tools, CI integration, and efficient code‑quality maintenance across massive projects.
This article introduces JDReact, a multi‑end integration framework used by JD.com, and details the design, principles, and usage of its bidirectional mini‑program conversion tool that enables low‑cost migration between WeChat mini‑programs and JDReact applications across various development scenarios.
Understanding JavaScript parsers—such as Esprima, Acorn, and Babylon—reveals how they generate ASTs, validate syntax, prioritize operators, and more, while distinguishing eager from lazy parsing modes in V8, enabling developers to optimize code performance through tools like optimize-js.
This article explains how to use TypeScript's custom transformation feature to rewrite import statements like "import { Button } from 'antd'" into per‑component imports, reducing bundle size, and walks through the required AST manipulation, visitor logic, and integration with ts‑loader.
This article provides a thorough overview of Babel, covering its core concepts, installation and configuration methods (including Webpack, fis3, command‑line, and programmatic usage), preset and plugin options, the compilation pipeline, AST fundamentals, and step‑by‑step instructions for creating and testing custom Babel plugins.
This article explains how Python injection flaws—such as OS command, code, SQL, and arbitrary file download attacks—can be identified by analyzing abstract syntax trees, tracking controllable parameters, and implementing static checks to flag dangerous function calls.
This article explains how Meituan’s Android Lint was extended to reliably detect HashMap usage under JDK 7 generics—even when declarations and assignments are separated—by leveraging JavaContext.getType, and how a false‑positive Toast‑in‑lambda bug caused by Retrolambda was eliminated through explicit LambdaExpression checks and reflective issue‑registry replacement.
This article explains how Babel parses ES6 code into an AST, traverses and modifies nodes using visitors and paths, and demonstrates a practical plugin that replaces a custom abs function with Math.abs, providing a solid foundation for building advanced JavaScript transformations.
Learn how to use Facebook’s jscodeshift tool to write codemods that automatically rename lifecycle methods in JavaScript components, with step‑by‑step examples, test setup using AVA, and detailed AST traversal logic for precise transformations.
This article walks through the fundamentals of creating a tiny template engine, explaining how templates are split into text, variables and blocks, how delimiters are parsed, how an abstract syntax tree is built, and how both Python and JavaScript can render the template using eval or Function constructors.
This article explains how to create a small language compiler in Perl by using Parse::RecDescent or Parse::Yapp for parsing, representing code with Moose‑based AST nodes, and generating output with Perl or Template Toolkit, while discussing performance trade‑offs and Perl 6 prospects.
