Create-React-App 在 Edge 浏览器中不起作用答案

【问题标题】：Create-React-App not working in Edge BrowserCreate-React-App 在 Edge 浏览器中不起作用
【发布时间】：2020-06-08 21:22:07
【问题描述】：

我目前正在玩 React，从 Create-React-App Boilerplate 开始，我在 https://reactjs.org/docs/create-a-new-react-app.html 之后下载了它。

在 Chrome 中，代码运行良好，但在 Microsoft Edge 中，浏览器窗口保持空白，没有任何输出。

我没有以任何方式修改 Create-React-Package，但是，这也适用于我根据教程编写的应用程序：在 Chrome 中运行良好，但 Edge 只是显示白屏，好像没有执行任何代码完全没有。

我需要一些额外的包来让 React 应用程序在 Edge 浏览器中运行吗？

【问题讨论】：

检查控制台是否有任何错误

标签： javascript reactjs microsoft-edge

【解决方案1】：

这是设计使然。如果您查看您的 package.json，则开发版本仅配置为使用以下浏览器：

"development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
]

阅读https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers了解更多信息

【讨论】：

非常感谢，但是有没有办法在开发中启用 Edge？
尝试在浏览器列表中添加 Edge 浏览器并安装 React 应用程序 polyfill 可能有助于使用 Edge 浏览器运行您的项目。

【解决方案2】：

您必须使用一些最新的 javascript 函数，例如 String.prototype.includes() 或类似 Edge 上出现问题的函数。你可以添加polyfill

npm install react-app-polyfill core-js

// 在 App.js 或主文件中

import 'react-app-polyfill/stable';

【讨论】：

【解决方案3】：

我处理的是 IE 和 Edge 兼容性。就我而言，我在某些页面中编写代码

windows.scrollTo(0,0);

在 Chrome 中，FireFox 和 Safari 工作正常，但在 Edge 和 IE 中存在冲突。
特别是 scrollTo(0,0) 语法。所以我尝试将语法更改为

windows.scrollTop = 0;

这个简单的更改解决了我的问题，我在 IE 检查器控制台中找到了解决方案调试，因为 Edge 控制台没有显示任何信息。祝你好运！

【讨论】：

【解决方案4】：

如果您查看开发者工具，您会看到正在发生的任何错误。如果您提供它们，将更容易追查问题。

对于较旧的浏览器，通常需要添加一个 polyfill：

npm install react-app-polyfill

https://www.npmjs.com/package/react-app-polyfill

【讨论】：

【解决方案5】：

我对 Edge 48 也有类似的问题。使用 react-app-polyfill 的建议解决了一些问题 - 在我的情况下，它是 Array.prototype.flatMap 支持。

但是，polyfill 不能解决一些语言问题。我在整个代码中都使用了扩展语法，并且不得不手动替换它。

如果你的代码中有这样的东西：

const { x, y, ...rest} = props;
const newProps = {...rest, a:1 };

那么您需要将扩展语法替换为：

const { x, y } = props;
const rest = {};
Object.keys(props).forEach(key => {
  if(key!=='x' && key !=='y') rest[key] = props[key];
});
const newProps = Object.assign({}, rest, {a:1});

可能有一种方法可以转换为 ES5，但我不确定如何在不严重干扰 create-react-app 默认配置的情况下执行此操作。

【讨论】：