1 views collected around this technical thread.
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.
This article introduces the auto-i18n-translation-plugins, a framework‑agnostic Vite/Webpack plugin that automatically extracts Chinese text from source code, replaces it with hash‑based $t calls, generates language packs, and seamlessly translates new or incremental strings using configurable translators such as Youdao or Google.
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.
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 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 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 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 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.
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 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.