如何在create react app中生成源代码映射？

Question

我想知道如何在create-react-app中生成源代码映射？它们是否会自动生成？并且它们存储在构建文件夹中吗？

我已经读了很多关于使用webpack生成它们的文章，但我的应用程序没有使用webpack，所以我想知道如何在没有webpack的情况下完成此操作。

我也不想弹出。

- Red Baron

---

create-react-app应该预装了webpack。无论如何，它肯定会在构建文件夹中生成源映射。 - Robin Zigmond

@RobinZigmond 谢谢。我对将它们上传到生产环境持谨慎态度，所以每次更改后我需要重新生成它们吗？ - Red Baron

我不是专家（实际上只是在周末第一次构建/部署了一个 CRA 应用程序），但每当您想要新的生产版本时，都要运行构建脚本。如果您不想在生产中使用它们，我猜您只需在部署之前将其删除即可。 - Robin Zigmond

@RedBaron - 我也遇到了同样的问题，你找到解决方案了吗？ - bijayshrestha

我感到困惑的是评论和答案似乎回答了与问题相反的内容。难道原帖不是想要生成源映射吗？而这些答案似乎是关于抑制源映射生成的。我知道源映射应该默认生成，但我一直在我的 jsx 文件之外的文件中看到类似 react-jsx-runtime.development.js、react-dom.development.js 等的控制台错误。如何解决这个问题？或者找到关于这个问题的SO（Stack Overflow）问题/答案？ - Sigfried

Answer 1

根据 CRA（create-react-app）文档，生产模式下默认生成源代码映射(source maps)。

但是，你可以通过运行 GENERATE_SOURCEMAP=false ./node_modules/.bin/react-scripts build 来禁用此行为(即在生产模式下生成源代码映射)，或者如果你想永久禁用此行为，请执行以下解决方案之一：

1. 在你的 .env 文件中设置 GENERATE_SOURCEMAP=false。
2. 修改你的 package.json 中的脚本，将 "build": "react-scripts build" 替换为 "build": "GENERATE_SOURCEMAP=false react-scripts build"

https://facebook.github.io/create-react-app/docs/advanced-configuration

- 3b3ziz

---

在 Windows 上，如果要将 2.* 添加到 (2) 中，可以像这样添加 &&： "scripts": { "build": "set GENERATE_SOURCEMAP=false && react-scripts build" } - adir abargil

他们为什么要这样做？难道源映射不是一种“泄漏”吗？此行只有在相应的环境变量被明确设置时才会评估为false（禁用源映射）。 - Minh Nghĩa

源映射默认为公开状态。但是，您的前端代码也是如此。有关选择是否使用源映射的更多上下文，请参见此答案：https://dev59.com/0l4c5IYBdhLWcg3w9-J2 - Jakob Jan Kamminga

我真的不理解这些答案。问题是关于如何生成源映射，不是吗？那么，为什么你们在解释如何不生成源映射呢？我猜作者@Red Baron想知道如何禁用它，而不是如何生成它。无论如何，对我来说答案很简单。当创建构建时，会生成源映射。但还有一个问题，如果存在Typescript源映射，我该如何生成它，因为构建会生成Javascript。 - Matheus Camara

Answer 2

你可以像@3b3ziz所说的那样，在Windows上真正地设置GENERATE_SOURCEMAP=false。然而，为了在不同的操作系统上运行脚本，最好遵循官方文档中的高级配置章节。

需要做以下几步：

1. 在项目根目录下（与package.json文件相同的文件夹）创建一个.env文件。

2. 在该文件中写入GENERATE_SOURCEMAP=false。

3. 重新运行你需要的命令。 react-scripts不会检测到.env文件的更改。

- Pablo LION

Answer 3

如果您正在使用 CRA，请将以下内容添加到您的 package.json 文件中。

"scripts": { 
    "build": "set  \"GENERATE_SOURCEMAP=true\" && react-scripts build" 
  }

- Yogita Sinkar

---

如何在“react-scripts start”中启用它？ - AlxVallejo