跪拜 Guibai
← All articles
Frontend · Trae · Architecture

A 49-Component Import Refactor That Took Minutes Instead of an Afternoon

By 前端梦工厂 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Batch refactoring across dozens of files is exactly the kind of tedious, error-prone work where AI agents outperform manual effort — not by writing clever algorithms, but by handling edge cases systematically and never getting sloppy on the 47th file. The plan-first workflow shown here (scan, map dependencies, surface edge cases, dry-run, execute, verify idempotency) is a repeatable pattern for any codebase migration.

Summary

uView Pro's 99 components relied entirely on uni-app's easycom auto-import mechanism, meaning no file contained explicit import statements for its internal dependencies. This broke two workflows: importing a single component without easycom, and renaming the component prefix to avoid conflicts with other libraries. The root cause was simple — templates referenced other components by tag name, but the script setup never declared them.

A TRAE Work agent was given the task in Plan mode. It scanned the directory, built a dependency map for all 49 affected components, and flagged edge cases: HTML comments containing component tags that should be ignored, and nested `<template>` blocks that broke naive regex extraction. The agent produced a Node.js script with dry-run preview and idempotent execution, then ran it to insert 82 import statements across the codebase with zero new type errors.

The entire job — analysis, planning, execution, and verification — completed in minutes. A manual approach would have taken an afternoon of repetitive file-by-file editing, with a high chance of missing dependencies inside nested templates or accidentally importing commented-out code.

Takeaways
49 of uView Pro's 99 components had no explicit import statements, relying entirely on easycom auto-import to resolve internal dependencies.
Single-component imports and prefix renaming both broke because templates used hardcoded tag names like `<u-mask>` that easycom couldn't remap.
The agent detected that `u-steps` and `u-select` contained component tags inside HTML comments and excluded them from the import list.
Nested `<template v-if>` blocks in `u-upload` and `u-calendar` broke non-greedy regex extraction; switching to "content before `<script>`" fixed it.
A lookahead assertion `(?=[\s/>])` prevented `u-step` from falsely matching `u-steps` during tag detection.
The generated script supported dry-run preview and idempotent re-execution, showing "Modified 0, Already existing 49" on the second run.
Running `npm run type-check` after the change produced zero new type errors across the entire codebase.
Conclusions

AI refactoring tools handle the kind of work that degrades human attention most: repetitive pattern-matching across dozens of near-identical files where the 40th edit is as error-prone as the first.

The plan-first workflow — where the agent produces a reviewable plan file before touching code — shifts the developer's role from executor to reviewer, which is faster and catches mistakes earlier.

Edge cases like commented-out code and nested templates are exactly what make manual refactoring risky; an agent that explicitly surfaces them before execution removes the main source of regressions.

The idempotency check (re-running the script to confirm zero changes) is a simple verification step that manual workflows rarely include but automated ones get for free.

Concepts & terms
easycom
uni-app's automatic component import system. When configured in pages.json with a prefix-to-path mapping, components matching the prefix are globally available in templates without manual import statements.
lookahead assertion
A regex feature (`(?=...)`) that checks what follows the current match position without consuming those characters. Used here to ensure `<u-step` only matches when followed by a space, `>`, or `/`, preventing false matches on `<u-steps>`.
idempotent execution
Running the same operation multiple times produces the same result as running it once. The import-insertion script achieved this by checking for existing imports before adding new ones, so re-running it added zero duplicate statements.
From the discussion
Featured comments
码农gg

This treats the symptoms, not the root cause

前端梦工厂

What's up, share your brilliant insight

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗