首页 > 解决方案 > 为什么 Firebase 部署完整的反应应用程序而不是部署构建目录文件?

问题描述

所以我使用 create-react-app 工具链创建了一个反应应用程序。编写了一些组件并运行

firebase init

npm run build

firebase deploy --only hosting

现在,当我在 chrome dev-tools 的源选项卡中检查我的实时应用程序时,它显示了 react 应用程序的所有源文件,包括评论。

firebase 不应该只部署构建目录中为生产优化和缩小的块吗?

我运行网络测试以查看正在获取的文件类型,令人惊讶的是它只获取了构建目录中的块。那么我的 src 目录的所有文件如何也以原始形式存在?

现在有可能浏览器从块中构造它们。然后它似乎是一个反应构建问题,它不会在生产构建中删除评论和丑化。

但我也分析了构建目录中的 js 块,它们没有嵌入评论。

这是我的火力基地配置:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}


标签: reactjsfirebasefirebase-hostingfirebase-cli

解决方案


所以我找到了解决方案。

它与firebase托管无关。

需要配置 react 的构建来解决这个问题。基本上,我们必须停止 react build 生成源映射。

看起来构建目录中的这些源映射包含我们部署到 firebase 的原始 js 文件。

将 package.json 中的 react build 命令更改为


"build": "GENERATE_SOURCEMAP=false react-scripts build",


推荐阅读