Design and Implementation of a React Scaffolding and Packaging Script for Financial Front‑End Projects

Background – In early 2017 the financial front‑end team began migrating large‑scale projects to a React stack. Manual copying of webpack configs, project structures, and package files caused omissions, increased developer workload, and hindered rapid onboarding.

Problem Statement – The team needed (1) an automated project‑creation tool that generates ready‑to‑use templates, and (2) a generic packaging script that abstracts configuration into a reusable npm package, eliminating repetitive setup.

Preparation – They first classified project types (e.g., mobile, PC) to define distinct scaffolding templates, ensured extensibility for future templates, and standardized base library versions (React, React‑Router) to reduce learning curves.

Architecture & Implementation – Scaffolding – Inspired by Yeoman, a custom generator was built to select a template, copy files, and install dependencies. The scaffolding now supports multiple project types (React, Node, mini‑programs) and embeds best‑practice configurations such as earth‑scripts and earth‑components‑scripts .

React Packaging Script (earth‑scripts) – After extracting common webpack, Babel, and dev‑server settings from the first successful React project, the team created an npm package offering: unified chunk splitting (runtime, vendor, entry, async), single‑page support, hot‑reload, ES6/SCSS compilation, build compression, TypeScript support, multi‑page capability, custom config exposure, external CDN handling, Jest integration, mock server, and PWA service‑worker plugin.

Key Features Implemented – Multi‑page application support via dynamic entry detection and html‑webpack‑plugin instances. Custom splitChunks configuration for optimal caching of common and vendor bundles. BrowserRouter support in development through dev‑server redirects. Automatic injection of external CDN resources with externals integration. Webpack plugin to rewrite asset paths based on CDN configuration.

Results & Summary – The scaffolding and packaging script have been adopted by all financial front‑end projects (260+ projects, 55+ components), achieving consistent tech stacks, easier hand‑offs, high extensibility, and zero‑configuration project creation, thereby significantly improving development efficiency.