Applying jscodeshift Codemods for Large‑Scale Frontend Refactoring

When a frontend project grows, a single npm package that exports many tracking constants can bloat the bundle and make refactoring painful; the article demonstrates replacing the package's object export with individual constant exports to enable on‑demand imports.

The concept of codemod —originating from Facebook—refers to semi‑automated, large‑scale codebase transformations that rely on abstract syntax tree (AST) manipulation, allowing developers to safely migrate breaking API changes.

jscodeshift is a JavaScript/TypeScript codemod framework that parses code into an AST using Babel, provides utilities from ast-types and recast , and offers collection‑based APIs for traversing and mutating nodes.

Step 1: File selection – locate files importing the old package: const trackConstantsImportDeclarations = root.find(j.ImportDeclaration, { source: { value: 'an-npm-package-containing-constants' } }); if (!trackConstantsImportDeclarations.length) return;

Step 2: Replace member accesses – find ConstantsForTrack.X member expressions, collect used keys, and replace each with the identifier X : let usedKeys = []; const memberExprs = root.find(j.MemberExpression, { object: { name: 'ConstantsForTrack' } }); memberExprs.replaceWith(nodePath => { const { node } = nodePath; const keyId = node.property; if (keyId.name) { usedKeys.push(keyId.name); return keyId; } }); if (!usedKeys.length) return;

Step 3: Rewrite the import statement – generate a new import that pulls only the needed constants from the package’s es/constants entry point: usedKeys = [...new Set(usedKeys)]; const keyIds = usedKeys.map(key => j.importSpecifier(j.identifier(key))); const newImport = j.importDeclaration( keyIds, j.literal('an-npm-package-containing-constants/es/constants') ); trackConstantsImportDeclarations.at(0).replaceWith(() => newImport); return root.toSource({ quote: 'single' });

The article also lists useful jscodeshift APIs ( find() , filter() , replaceWith() , insertBefore() , etc.), points to AST Explorer for visual debugging, and provides CLI options such as parallel processing, dry‑run mode, and file extensions.

By following these steps, developers can automate the tedious refactor, reduce bundle size, and maintain code consistency across large JavaScript codebases.