如何禁用 React JS 应用程序的源映射

Posted 2023-02-22

【中文标题】如何禁用 React JS 应用程序的源映射

【英文标题】：How to disable source maps for React JS Application

【发布时间】：2019-01-29 17:39:12

【问题描述】：

我的 react 文件夹结构如下

我没有使用 create-react-app 版本。我尝试使用GENERATE_SOURCEMAP=false。但它没有用。

在哪里可以找到 .map 文件。如何删除这些文件？

我找不到构建文件夹。 我试过使用下面的脚本，但它不能删除源映射

 "scripts": 

    "start": "react-scripts start",
   "build": "GENERATE_SOURCEMAP=false && npm run build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  ,

【问题讨论】：

将您的webpack.config.js 添加到问题中。

我的文件结构中没有 webpack.config.js 文件

你用什么来生成项目的？

我使用 npm run start

你不能这样做，因为 create-react-app 为你配置 webpack，如果你想手动设置你的 webpack，你必须运行npm run eject（不建议初学者使用）跨度>

【参考方案1】：

只需删除&&

"scripts":     
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

【讨论】：

但是当我尝试上面的代码时，浏览器仍然显示代码。谢谢

你确定你的代码是这个"build": "GENERATE_SOURCEMAP=false react-scripts build"而不是这个"build": "GENERATE_SOURCEMAP=false && react-scripts build"

是的。我用的一样。浏览器仍然显示相同

你必须使用npm run build生成项目

如果你想先运行构建文件，你需要全局安装 serve 'npm run serve -g' 和 'serve build'，然后你可以在浏览器中使用 localhost:5000 打开它

【参考方案2】：

您必须在根目录（与package.json 相同的文件夹）中创建一个.env 文件，并将GENERATE_SOURCEMAP=false 设置在一行中。

有关其他配置，您可以参考此处的文档： https://facebook.github.io/create-react-app/docs/advanced-configuration

【讨论】：

使用 react@16.13.1 的正确解决方案

感谢链接相关文档

【参考方案3】：

我已经测试过并且有效的是将此代码添加到您的 .env.production 文件或 .env 文件中

GENERATE_SOURCEMAP=false

【参考方案4】：

解决方案 1

编辑您的package.json，如下所示：

Windows：

    "scripts": 
        "start": "react-scripts start",
        "build": "set \"GENERATE_SOURCEMAP=false\" &&  react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      ,

Linux：

    "scripts": 
        "start": "react-scripts start",
        "build": "GENERATE_SOURCEMAP=false react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      ,

---

解决方案 2（推荐）

此解决方案不依赖于操作系统，适用于 Linux 和 Windows。只需在项目的根路径中创建一个名为 .env 的文件，然后在其中添加以下行：

GENERATE_SOURCEMAP=false

【参考方案5】：

对于 windows cmd 和 create-react-app + react-scripts，

您应该使用 set 并用 \" YOUR_TMP_ENV_VAR \" 结束

查看示例：

"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build

这个答案帮助了我： How to set environment variable in React JS..?

【讨论】：

为我工作。但我不明白为什么当我使用&& set PORT=3001 时它也可以工作但没有引号。你知道为什么吗 ？是因为GENERATE_SOURCEMAP 中的_（下划线）吗？

这是正确的答案。在Win10上测试。谢谢！

【参考方案6】：

这对我有用。希望它可以帮助任何人。

// package.json

"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"

这样，它会在构建生成过程中自动删除地图文件。

【讨论】：

这应该可行，但不合理。最好不要创建 *.map，而不是创建和删除它。

@Ponleu 没错。但我不知道我们如何防止不必要的地图文件，所以这是目前的解决方案。如果您找到更好的方法，那么您可以建议编辑，我们将不胜感激。

但是当您在浏览器中加载应用程序时，.map 文件会出现 404 错误

@ShivangGupta 我在 Chrome 和 Firefox 中对此进行了测试，如果你打开开发工具，你只会在源地图上得到 404。

【参考方案7】：

create-react-app v2.1.3 弹出解决方案。

转到 /config/webpack.config.js 目录并更改以下行：

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

收件人：

const shouldUseSourceMap = false;

鲍勃是你的叔叔。

【参考方案8】：

把这个放在你的 package.json 中

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

它适用于 Windows 和 Linux...

【参考方案9】：

只需在.env 中添加GENERATE_SOURCEMAP=false

【参考方案10】：

经过长时间的斗争，没有任何效果。最后对我有用的是 更改 sourcemap：nodemodules/react-script/config 内 webpack.config.prod.js 中的 false 希望它也对你有用。