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

Question

我正面临着 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, like Gecko) Viera/3.18.1 Chrome/23.0.1271.97 Safari/537.11

这是我正在尝试的:

1. 创建一个新的create-react-app项目
2. 运行yarn build
3. yarn global add serve && serve -s build
4. 使用我的 LAN IP(不是本地主机)并在 url 地址浏览器上输入 http://<my-lan-ip>:5000 (5000端口为serve命令提供的默认端口)

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

所以我想知道并请在这里分享一些想法:

1. 旧电视浏览器不支持 React？
2. 或者可能只是一个 polyfill 问题？
3. 或者不支持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 的部分这有助于找到这个解决方案。

Answer 1

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

• Map 和Set 数据结构
• window.requestAnimationFrame() API

根据 MDN，基本 Map和 Set直到版本 38 才向 Chrome 添加支持，您必须使用 vendor 前缀才能访问 requestAnimationFrame直到 Chrome 24。

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