ReactJS

Question

我今天用 create-react-app 创建了一个新项目。生产版本在 IE11 上运行不正常，控制台显示以下错误：

SCRIPT1010: Expected identifier

它指向我里面的线 main.js:

{var n=e&&e.__esModule?function(){return e.default}:function(){return e};

错误在上面的e.（默认）之后。我的包裹 json 很普通：

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

很奇怪，我的开发服务器在 IE11 上运行完美，所以问题只出现在生产版本上。它也适用于 Chrome。我需要 polyfill 吗？

Answer 1

您需要包含 babel-polyfills 并转译为 ES5 才能使 IE11 正常工作。

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

https://reactjs.org/docs/javascript-environment-requirements.html

你可以像这样通过 webpack 包含一个 polyfill

entry: {
      app: [
        'babel-polyfill',
        'react-hot-loader/patch',
        'react',
        'react-dom',
        './src/index.web.tsx',
      ]
},

Answer 2

似乎 polyfill 的顺序也是一个因素。此问题中有多种解决方案可以帮助解决此问题。 https://github.com/facebook/react/issues/8379

Answer 3

这是 IE 问题，不是 React 框架问题。

"default"在IE上是保留字的问题

您可以将 "default" 函数重命名为新名称或使用 javascript 函数作为 :

return e["default"]

Answer 4

这是我修复它的方法。不要忘记 React "Dan Abramov" 先生在这方面帮助了我。

所以问题是默认情况下，应用程序在 IE7 上呈现，而不仅仅是在支持转译构建的 IE IE11/EDGE 上呈现。所以我不得不提到元信息让浏览器知道预期的浏览器是 IE11/edge。将此添加到 index.html 的 head 部分：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

据我所知，您还会在控制台中看到一些错误，内容为：

SCRIPT5009: 'Set' is undefined

别担心，也有办法解决这个问题：https://reactjs.org/docs/javascript-environment-requirements.html

这是我在 git 上与 Dan 讨论的问题：https://github.com/facebook/create-react-app/issues/4255

ReactJS - SCRIPT1010：预期标识符 - IE11 上的生产版本不是运行

ReactJS - SCRIPT1010: Expected identifier - Production build not running on IE11

polyfills

internet-explorer-11

babeljs

create-react-app