javascript - 在智能电视浏览器上运行的create-react-app

我在尝试在智能电视浏览器中运行我的应用程序时遇到了create-react-app环境的大问题。

规范电视和浏览器(http://whatismybrowser.com)

电视:Panasonic TC-32DS600B

浏览器:Chrome 23 FreeBSD

userAgent:Mozilla/5.0(X11; FreeBSD; U; Viera:pt-BR)AppleWebKit/537.11(KHTML，如Gecko)Viera/3.18.1 Chrome/23.0.1271.97 Safari/537.11

这是我想要的:

创建一个新的create-react-app项目

运行yarn build

yarn global add serve && serve -s build

使用我的LAN IP(不是本地主机)并在URL地址浏览器中键入http://<my-lan-ip>:5000(5000端口为serve命令提供的默认端口)

当我按照这些步骤操作时，我会得到一个空白页。空白页仅在电视浏览器中出现。在PC和Mobile上运行良好。

因此，我很想知道，并要求在这里有一些共同的想法:

旧的电视浏览器不支持React？

还是仅仅是polyfill问题？

还是不支持HTML5，CSS3？

有人已经遇到这个问题了吗？有什么解决办法还是不行，这不可能吗？

编辑:解决方案

感谢@Rikin和@JoeClay，我提出了一个解决方案。首先，下载Chrome 23版之后，我可以看到问题是polyfills(Set和Map)。

因此，在安装yarn add core-js --dev和yarn add raf --dev之后。

更新src/index.js

import 'core-js/es6/map'; // <-- added this line after installed packages
import 'core-js/es6/set'; // <-- added this line after installed packages
import 'raf/polyfill'; // <-- added this line after installed packages

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

另外，React Docs的部分有助于找到此解决方案。

最佳答案

较新版本的React(v16 +)需要:

Map和Set数据结构

window.requestAnimationFrame() API

根据MDN的说法，直到38版才向Chrome添加了基本的Map和Set支持，并且您必须使用供应商前缀才能访问Chrome 24之前的 requestAnimationFrame 。

由于电视使用的是Chrome 23，因此您需要对这些API进行填充。 React docs建议为此使用 core-js 或 babel-polyfill 。

关于javascript - 在智能电视浏览器上运行的create-react-app，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49796859/