This article explains how to use custom Babel plugins to automatically inject try/catch blocks into massive Jest‑based UI automation test suites, improving error visibility, reducing manual effort, and maintaining code readability without invasive changes to existing JavaScript code.
React Compiler 1.0, released in 2023, automatically eliminates the need for manual useMemo, useCallback, and memo by statically analyzing code to cache computations, generate update conditions, and replace these hooks, offering a safer, more comprehensive performance boost across Vite, Webpack, Next.js, and React Native projects.
An unexpected TypeError in Taro’s useRouter reveals that the router can be null after onHide, leading to crashes; this article dissects the root cause in Taro 3.6.29, examines the code flow, and presents a Babel plugin workaround that safely retrieves parameters.
This article explores three approaches to bring Vue‑like directives such as r‑if and r‑for into React, compares their pros and cons, and provides a complete Babel plugin implementation that transforms custom JSX attributes into standard React conditional and list rendering syntax.
To overcome the 2 MB main‑package limit of WeChat mini‑programs, this guide details a step‑by‑step solution that uses @galacean/effects for stunning homepage animations, applies page and module splitting, Babel and webpack plugins, and Taro configuration to move large code into asynchronous sub‑packages.
An automatically applied Babel plugin scans JavaScript AST nodes and rewrites risky property accesses and logical‑AND chains into optional‑chaining expressions, letting developers prevent TypeError crashes without modifying source code, while offering include/exclude filters, optional short‑circuit optimization, and compatibility with older browsers via downstream transforms.
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.
This article explores Umi's useModel lightweight state management solution, covering basic usage, performance optimizations with selectors, custom hooks, Babel plugin automation, and an in‑depth source code analysis, while also discussing its drawbacks and practical considerations for frontend projects.
At a recent Emca TC39 meeting, a Google engineer proposed dividing JavaScript into a minimal core language (JS0) and an advanced variant (JSSugar), arguing that new language features often harm security, performance, and stability, and suggesting that higher‑level capabilities be handled by external tools like TypeScript or Babel.
The JavaScript pipeline operator replaces cumbersome temporary variables, nested calls, and limited method chaining by letting developers chain regular, async, or generator functions directly, improving readability and maintainability, while Babel’s proposal‑hack plugin can be installed and configured now to start using it.
By binding a Vue single‑file component’s AST to a visual UI, this project parses templates with node‑html‑parser, transforms scripts via Babel, and processes styles with standard loaders, allowing developers to edit component properties visually, automatically regenerate synchronized source code, and preview changes, with a prototype demo and planned drag‑and‑drop, styling, state, AI, and CI/CD extensions.
Babel is a micro‑kernel JavaScript transpiler that parses source code into an AST, lets plugins and presets transform it, and generates backward‑compatible code with optional source maps, while its runtime helpers, polyfills, and close alignment with the evolving ECMAScript specification ensure modern syntax works across legacy environments.
This article walks through initializing a vue-mini mini‑program project, explains the build.js workflow, details how TypeScript, HTML and CSS files are processed with Babel, Rollup and PostCSS, compares its performance to Taro, and evaluates vue-mini’s current strengths and limitations.
This article explains how to efficiently locate and edit React component source files in large projects by using the click-to-react-component tool, covering installation, demo setup, interaction shortcuts, and the underlying mechanism that maps DOM elements to source code via React fiber nodes and VSCode links.
The article introduces the newly open‑sourced React Compiler, explains its underlying concepts and automatic memo optimization, provides step‑by‑step usage instructions with health‑check, ESLint and Babel plugins, and shares performance results from Meta’s production apps.
This article walks through the design and implementation of a compiler that automatically transforms Rax components into Taro components, covering the background, Babel‑based AST processing, import rewriting, component attribute mapping, project structure, automated end‑to‑end testing, and future enhancements.
This article explains four practical techniques—page sub‑packaging, shared module sub‑packaging, Babel‑based import path rewriting, and image asset offloading—to reduce a Taro mini‑program’s main bundle below the 2 MB limit, detailing the underlying MiniSplitChunksPlugin implementation, configuration steps, and code snippets.
This article examines the directory structures, package.json entries, and build scripts of popular React component libraries—Ant Design, Arco Design, and Semi Design—explaining how they generate CommonJS, ES Module, and UMD bundles using tools like tsc, Babel, Webpack, and Gulp, and shows how to apply the same approach when creating your own library.
This article explains how to use a custom Babel plugin to automatically inject standardized logging statements into JavaScript code, addressing common debugging challenges such as sparse logs, inconsistent log formats, and missing error handling in async/await constructs.
This article explains the purpose and format of JavaScript SourceMaps, details the VLQ‑based encoding of the mappings field, and walks through how tools like webpack and Babel generate SourceMaps to map transformed code back to the original source for effective debugging.
This article provides a detailed overview of Babel, covering its definition, history, installation, configuration, core compilation phases, plugin and preset mechanisms, polyfill handling, and a step‑by‑step example of creating a custom try‑catch plugin for JavaScript code transformation.
This article examines why bundle size matters for front‑end performance and provides a step‑by‑step guide to reducing Webpack output by optimizing Babel polyfills, leveraging @babel/preset‑env, using @babel/runtime, applying tree‑shaking, and eliminating duplicate dependencies.
This article explains the fundamentals of abstract syntax trees (AST) in frontend development, covering their generation, role in code transformation, and practical use of Babel plugins to instrument and modify JavaScript code, with detailed examples and code snippets.
This tutorial explains how to package a custom Web Components dropdown, publish it to npm using either Babel or Webpack, and then integrate the published component into a React application, covering project setup, configuration files, build scripts, and deployment steps.
This article presents a technical case study of Qunar's low‑code platform, detailing the current cross‑platform rendering challenges, the feasibility analysis of replacing H5 with React Native, the design of a Babel‑based code transformer, runtime integration, performance results, and future plans.
This article explains how to upgrade Taro 2.x projects to Taro 3.x by converting source code into an AST using Babel, programmatically editing imports, configs, routers, and styles, and then generating the updated code, complete with practical code examples and migration tips.
The Vivo front‑end team built a custom compiler that automatically transforms WePY mini‑program files—including templates, scripts, components, and pages—into UniApp Vue code, cutting the estimated 25‑person‑day migration to seconds, delivering a bug‑free launch and paving the way for open‑sourcing the tool.
This article examines existing ES‑check tools, compares community and mpx implementations, and presents a comprehensive enhanced version that supports multi‑file detection, HTML parsing, source‑map resolution, and both CLI and library usage, detailing its underlying principles, code examples, and practical advantages for frontend development.
This article provides an in‑depth overview of Babel, covering its origins, core purpose as a JavaScript compiler, configuration file options, plugin and preset usage, runtime optimization, integration with webpack, and the underlying parsing‑transform‑generation pipeline illustrated with a simple compiler example.
This tutorial walks you through creating a production‑ready front‑end project from an empty directory using Webpack 5, React 18 and TypeScript, covering project structure, dependencies, Babel and TypeScript setup, resource handling, development environment, performance optimizations, and full configuration files.
This comprehensive, step‑by‑step guide walks developers through Webpack’s core concepts, project setup, configuration files, development server with hot module replacement, essential loaders for CSS, images, Less, and Babel, plus optimization techniques such as JavaScript minification, CSS extraction, and output cleaning.
This article curates a series of front‑end insights, covering Babel fundamentals and plugin development, Flutter widget lifecycle and state management, pure‑CSS transition recreations, user‑experience considerations, practical front‑end best‑practice tips, and a discussion on Vue’s potential move away from virtual DOM, while also inviting readers to join the Cloud Academy front‑end team.
This article analyzes the Babel 7.18 upgrade that caused regeneratorRuntime to disappear, leading to async/await failures and larger bundle sizes, explains the underlying plugin interactions, and provides practical solutions for frontend projects using Babel.
This article walks through creating a minimal JavaScript compiler—starting from tokenizing Lisp‑style input, building an abstract syntax tree, traversing and transforming it, and finally generating equivalent C‑style code, illustrating the core parse‑transform‑generate workflow used by tools like Babel.
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.
This article provides a comprehensive beginner-friendly guide to Babel, covering its definition as a JavaScript compiler, the parse‑transform‑generate workflow, AST concepts, core packages, plugin and preset classifications, configuration details, and step‑by‑step usage examples with code snippets.
This article collection explores key front‑end topics—including Vue server‑side rendering, comprehensive monitoring strategies, Babel compilation fundamentals, the latest CSS 2022 features, and decorator design patterns, and tile‑layout techniques for BI reporting—while also introducing the Cloud Classroom front‑end team.
This article explains the fundamentals of compilation, compares compiled and interpreted languages, outlines the full compiler pipeline, and uses Babel as a concrete example to show how JavaScript code is parsed, transformed, and generated for broader browser compatibility.
This article explains what an Abstract Syntax Tree (AST) is, how the ESTree specification standardizes JavaScript syntax, and how Babel parses, traverses, and transforms code using AST nodes, providing practical examples, core packages, plugin creation, and real‑world application scenarios for developers.
This article introduces JavaScript decorators, explains their relation to the decorator design pattern, shows how to configure Babel for decorator support, demonstrates class and method decorator syntax with detailed code examples, and discusses practical usage scenarios and execution order in modern front‑end projects.
This article analyzes the slow build process of Dada's massive frontend platform, identifies bottlenecks in dependency installation and webpack compilation, and presents practical optimizations such as node_modules caching, cp command adjustments, Babel loader caching, and other webpack tweaks that reduced average build time from 600 seconds to around 100 seconds.
This article examines how modern browsers now support most ES6 features, compares the bytecode size of native ES6 syntax versus Babel‑transpiled ES5 code across a range of language features, and explains when skipping transpilation can improve performance while still handling polyfills and runtime requirements.
This article explains the core‑plugin architecture, outlines the roles of Core, PluginApi and Plugin, and demonstrates how to create and integrate custom plugins for Babel and Webpack, covering AST transformation, visitor merging, Tapable hooks, and practical code examples to improve extensibility and maintainability.
This tutorial walks through creating a production‑ready React Native UI component library named vant‑react‑native, covering monorepo setup with Lerna, package naming, Yarn workspaces, commit and code standards, icon generation, on‑demand loading, debugging, documentation with Dumi, CI/CD deployment, and unit testing.
This article explains TypeScript’s compilation pipeline, AST and symbol system, its integration with VSCode via the Language Server Protocol, how Babel can strip types for bundling, and how to enforce type safety with the tsc command, providing code examples throughout.
This article explains Babel's role as a JavaScript compiler, details its three‑step architecture (parse, transform, generate), introduces plugin creation using the visitor pattern with practical code examples, and demonstrates how to debug and configure Babel plugins in a front‑end development workflow.
This article explores Babel’s role in early ECMAScript feature adoption, explains its plugin ecosystem, compares compile‑time versus polyfill approaches, and offers practical tips to improve build performance and avoid unnecessary code duplication.
This article introduces the concept of Abstract Syntax Trees (AST) in JavaScript, explains their purpose and generation process, and demonstrates practical examples such as removing debugger statements and enhancing console.log calls using Babel’s parser, traverse, and generator tools.
This article explains how to adapt GrowingIO's no‑embed SDK for Taro 3 by intercepting runtime events and using a Babel plugin to preserve user method names, achieving a stable zero‑tracking solution for mini‑programs.
This article presents a comprehensive overview of using JSX in Vue 3, covering its basic concepts, why Vue supports JSX, the changes introduced in Vue 3, practical scenarios, implementation details, and performance comparisons with the traditional template syntax.
This article explains how to write a Babel macro that fetches JavaScript libraries from a URL at compile time, covering macro concepts, limitations of JavaScript macros, preparation steps, a full importURL macro implementation, AST handling, synchronous requests, and post‑processing details.
This article explains what an Abstract Syntax Tree (AST) is, how it’s generated during lexical and syntax analysis, outlines its core structure, and demonstrates practical applications such as code transformation, linting, formatting, and custom Babel plugins with detailed code examples.
This article explains how to analyze and reduce React Native bundle size using tools like react-native-bundle-visualizer and the custom CRN bundle analysis platform, covering library replacements, import optimizations, code splitting, static asset handling, and reporting a typical 50% size reduction.
This article explains why Babel 6 and Babel 7 produce typical errors such as "regeneratorRuntime is not defined" and "Cannot find module 'core-js/library/fn/**'", then walks through the roles of @babel/preset‑env, @babel/plugin‑transform‑runtime, core‑js versions, useBuiltIns options, and provides concrete configuration examples for both application and library projects.
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.
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 chronicles the evolution of the Taro framework from its inception as a React‑based mini‑program solution to a fully open, plugin‑driven multi‑platform architecture, highlighting technical challenges, Babel‑driven JSX compilation, component model redesign, and community‑driven growth.
This article analyzes the challenges of packaging JavaScript libraries for npm, compares CommonJS, UMD, and ESModule outputs, demonstrates how Webpack’s tree‑shaking and sideEffects settings affect bundle size, and provides practical Babel configuration tips to achieve lean, reusable packages.
This article explains React server-side rendering (SSR), covering the differences between client-side rendering (CSR) and SSR, their advantages and disadvantages, and provides a step-by-step guide to implementing a simple SSR demo with React.
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.
Babel, originally 6to5, is a JavaScript compiler that transforms modern ES6+ code into browser‑compatible JavaScript using a parser, plugins, and presets like @babel/preset‑env, with configurable polyfill strategies and runtime helpers, enabling developers to target older environments via a simple CLI workflow.
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 step‑by‑step how to create, configure, and use custom synchronous and asynchronous Webpack loaders—including a console‑log remover and an ES6‑to‑ES5 transformer—covering project setup, loader implementation, options validation, source‑map generation, and loader resolution.
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 surveys the evolution of JavaScript from ES5 through ES10, explains which features are native in modern browsers, outlines the stage‑process for proposals, showcases code examples for classes, modules, generators, async/await, optional chaining, and discusses whether Babel is still needed.
This article explains why a newly rebuilt site can suffer a “JavaScript hangover,” then walks through concrete front‑end performance techniques—including tree shaking, code splitting, externalizing third‑party scripts, smaller library choices, differential serving, and reducing Babel‑generated bloat—to restore speed and improve user experience.
The guide shows how to modify a Webpack‑4 JavaScript SDK—adding Babel symbol handling, using transform‑runtime, employing Flash for IE9 cross‑domain requests, converting ES5 to ES3 with es3ify‑loader, configuring UglifyJs for IE8, polyfilling missing APIs, building a tiny selector engine, and testing on virtual IE7‑IE9 machines.
The project implements a front‑end integration test coverage tool that instruments client code with a Babel plugin and server code with istanbul‑middleware, collects real‑time line/branch data via a Chrome extension and timed uploads, stores versioned results on a coverage server, and visualizes incremental coverage dashboards, providing an objective quality gate and achieving over 80 % incremental line coverage in production.
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.
This article explains how to identify oversized JavaScript bundles with webpack‑bundle‑analyzer, split protobuf‑generated code into business‑specific modules, and apply Babel’s parser, traverse, types, and generator tools to automatically remove redundant commons code and restructure module patterns, dramatically reducing bundle size and improving frontend performance.
This article explains how React processes JSX by compiling it with Babel into React.createElement calls, detailing the handling of mixed JavaScript‑HTML syntax, the importance of capitalized component names, and common pitfalls when using expressions inside braces, illustrated with multiple code demos.
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.
This article details the front‑end performance improvements applied to JD's PLUS membership platform, covering architecture migration to Gaea 4.0, on‑demand Babel polyfill loading, PWA caching, request sequencing, skeleton screens, and modern image formats such as WebP and DPG.
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.
This article details the comprehensive front‑end performance improvements applied to the JD PLUS membership project, covering the migration to the Gaea4.0 webpack‑based scaffold, PWA offline caching, Babel 7 polyfill on‑demand loading, request and image optimizations, skeleton screens, and build‑time caching techniques to accelerate first‑screen rendering on mobile H5.
HTM is a pure‑JavaScript library that implements a JSX‑like syntax without a compiler, offering sub‑kilobyte bundle sizes, seamless integration with React/Preact, ergonomic syntax enhancements, and a new Babel plugin that dramatically improves performance and flexibility for frontend developers.
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.
The article explains that compiling experimental JavaScript features like JSX or class properties inside node_modules tightly couples libraries to build tools, leading to breaking changes, coordination overhead, and prolonged upgrade pain, which is why Create React App avoids such compilation.
Create React App 2.0, launched on October 1, updates core tools like Babel, Webpack, and Jest, adds Sass, CSS Modules, SVG components, optional Service Workers, and provides a clear migration path for both new and existing projects, while supporting modern browsers and optional polyfills.
This article explains the distinction between ECMAScript and JavaScript decorators, walks through the TC39 proposal stages, demonstrates how to work with property descriptors, Object.defineProperty, Object.defineProperties, Object.create, and shows practical examples of method, class‑field, and class decorators using Babel.
The article explains how to render custom components in WeChat mini‑programs by compiling React render methods into template classes, using dynamic templates, wx:for directives, and helper functions like miniCreateClass to bridge the gap between React and the mini‑program environment.
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.
An in‑depth exploration of React Hot Loader’s origins, underlying HMR principles, challenges with state and DOM preservation, the development of proxy‑based solutions, React Transform, and the progression to newer versions, providing practical code examples and insights for frontend developers.
This article presents a comprehensive guide to writing clean, maintainable JavaScript by avoiding legacy pitfalls, applying Clean Code principles, leveraging ES6/ES7 features, and using tools like Babel, ESLint, and Prettier to improve code quality and development efficiency.
This article explains how modern browsers that support ES modules can load native ES2015+ JavaScript while older browsers receive a compiled ES5 fallback, detailing conditional polyfill loading, webpack and Babel configurations, script tag usage, performance benefits, and practical implementation steps.
This article provides a comprehensive overview of the front‑end development workflow, explaining core concepts like HTML, CSS, JavaScript, and detailing essential tools such as npm, Babel, Gulp, Webpack, and popular frameworks like React and Vue, while addressing their roles and interactions.
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 guide explains how to install the Babel JSX plugin, write JSX inside Vue 2 components, covers key syntax differences, highlights important considerations, and suggests extensions like vue-class-component for more elegant component definitions.
This tutorial walks through setting up a TypeScript project with React, covering installation, tsconfig configuration, Webpack and Babel integration, creating a simple component, adding type declarations for third‑party modules, testing with Jest and ts‑jest, and enforcing code style with TSLint.
This article explores how to optimize Babel usage to reduce bundle size and improve performance by addressing helper duplication, third-party module handling, and import optimization through transform-runtime, include patterns, and import transformation plugins.
This tutorial provides a comprehensive, step‑by‑step guide to Webpack, covering its purpose as a JavaScript module bundler, installation, command‑line usage, configuration files, Babel and Handlebars loaders, plugins such as html‑webpack‑plugin, lazy‑loading, vendor chunk creation, and best practices for modern front‑end development.
This article explains what JavaScript decorators are, how they work on classes and methods, how to configure Babel for ES7 support, and demonstrates real‑world uses such as mixins and simple AOP, providing clear code examples throughout.
A humorous 2016 dialogue walks through the shift from jQuery to React, explaining JSX, ES6+, Babel, module bundlers, task runners, TypeScript, Flow, Fetch API, and template engines, while highlighting the rapid evolution of frontend tooling and best practices.
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.
This article introduces practical ES6 features such as template literals, multiline strings, default parameters, and destructuring assignment, demonstrates how they simplify code compared to ES5, and provides a step‑by‑step guide to using Babel with Gulp for seamless ES6‑to‑ES5 conversion.
This tutorial explains how to define a JavaScript library, set up a clean project structure, use Babel to transpile ES6, configure Webpack for development and production builds (including UMD output), add npm scripts, run Mocha/Chai tests, and manage related configuration files.
