如何利用React项目build生成的static文件夹文件恢复原始源码

无法100%还原和你本地存储完全一致的原始项目文件，但可以通过逆向处理构建产物得到可读性足够、支持二次开发修改的React代码，完全可以满足后续项目迭代的需求。

你在/static/js/目录下看到的randomname.chunk.js文件，是React项目构建时（Webpack/Vite/CRA等打包工具默认开启代码分割）生成的分片代码包：你写的所有组件、业务逻辑经过语法转译、压缩混淆后，会和第三方依赖代码拆分后存储在这些chunk文件中，是逆向恢复源码的核心依据。
如果同目录下存在后缀为.js.map的sourcemap文件，源码还原度可以达到90%以上；如果没有map文件，就需要通过反编译手动整理代码。

• 第一步：完整拉取所有构建资源
  把共享主机上的整个构建产物目录完整下载到本地，优先排查所有js文件同目录下是否存在对应的.map文件，不要遗漏css、media目录下的静态资源。
• 第二步：存在sourcemap文件的快速恢复流程
  1. 用sourcemap解析工具批量提取所有map文件中存储的原始源码，导出到本地目录
  2. 导出的内容会包含你原来src目录下的组件代码、业务逻辑，甚至大部分注释和自定义变量名、目录结构
  3. 新建对应脚手架的React基础项目，补全package.json（根据代码里引用的依赖补全包名和版本）、构建配置文件，安装依赖后即可直接启动项目调试
• 第三步：无sourcemap文件的反编译恢复流程
  1. 先对所有chunk.js做代码格式化，解除压缩后的代码混淆，把转译后的ES5语法还原为ES6+写法，识别其中的JSX语法结构
  2. 拆分依赖代码和业务代码：chunk文件中会打包进React、第三方UI库/工具库的代码，这部分不需要手动还原，识别出对应的包名和版本后后续直接通过npm安装即可，只需要提取你自己编写的业务逻辑部分
  3. 逐块梳理模块结构：把识别到的路由配置、页面组件、公共组件、状态管理逻辑、工具函数拆分到独立文件中，对混淆后的无意义变量名结合业务逻辑重新命名
  4. 关联静态资源：把css、图片、字体等静态资源和业务代码中的引用路径对应，调整路径配置保证资源可以正常加载
• 第四步：项目验证调优
  把整理好的代码放入新建的React基础项目中，安装对应依赖后启动本地服务，逐页对照线上版本验证功能、样式一致性，补全梳理过程中遗漏的逻辑片段，直到项目可以正常构建、运行。

注意：没有sourcemap的场景下，还原的代码不会保留原代码的注释、自定义命名和原始目录结构，整理工作量和项目复杂度正相关：简单的展示类站点通常几小时即可梳理完成，复杂的中后台类项目可能需要数天的逐块调试整理。

内容的提问来源于stack exchange，提问作者Daniel Ribeiro