如何恢复 React 构建解析的原始代码文件？答案

【问题标题】：How to recover original code file parsed by React build?如何恢复 React 构建解析的原始代码文件？
【发布时间】：2022-11-06 20:18:39
【问题描述】：

我正在处理 React 旧项目，其中一些具有本机结构，例如：

...{
    key: "render",
    value: function () {
      return React.createElement(
        "div",
        {
          className: "WrapperExamQuery",
          id: "IndexComponent",
        },
        React.createElement(
          "div",
          {
            className: "loadingWraper",
          },
          React.createElement(
            "div",
            {
              className: "teamLoading",
            },
            React.createElement("span", null, "loading... ")...

在我的实际工作团队中，没有人知道这是为什么，也没有找到原始代码（如果存在）。是否有工具可以解析或解析这些文件以使用反应jsx一般？欢迎任何建议。谢谢！

【问题讨论】：

我认为代码试图在 react 和 react-native 之间共享组件查看器，但当然需要一个函数来分别转换它们。

标签： reactjs jsx uglifier

【解决方案1】：

我们很久以前遇到过同样的问题。然后我们尝试了这个库。它不再维护，但您可以尝试

https://github.com/JoeStanton/babel-transform-js-to-jsx

我希望它有帮助:)

【讨论】：

谢谢。请告诉我更多。文档中的代码用于 package.json 并为 npm 创建脚本？

【解决方案2】：

接受的答案对我不起作用。什么起作用了，幸运的是，我用文件创建的网站启动并运行了，我最终只是从 chrome 的 devtools 复制文件。我敢肯定在 Firefox 中它是一样的。

打开 devtools 并在“Sources”选项卡中，您拥有原始状态的所有文件，您可以单独下载这些文件。

基本上，浏览器似乎会解码构建文件夹并重新创建原始文件夹。

【讨论】：

请分享为什么这对您有用的原因？

【解决方案3】：

如果您在 react 中使用默认构建脚本构建，则构建包包含组件文件，因此您可以通过浏览器的源部分访问它们。您的托管服务提供商可能会有所不同。我使用 Netfily，我可以得到我的项目。

【讨论】：