如何在IE9中运行ES6 React应用程序,没有错误

Question

我正在使用React 0.14和Babel 5.8.23开发JS应用程序.

我的应用在Chrome中工作正常,没有任何警告,但当我在IE9中查看该应用时,该应用爆炸显示:

SCRIPT5022: Exception thrown and not caught

在线上

ReactDOM.render(

当我捕获异常时,它表明它是从这段代码抛出的:

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

当我从生成的手动删除这些抛出时index.js,应用程序正常进行,虽然我确实看到了这些警告(可能不相关,并在https://github.com/facebook/react/issues/4990讨论):

Warning: MainLogo(...): React component classes must extend React.Component

我的所有组件都扩展了React.Component:

import React, { Component } from 'react';

export default class MainLogo extends Component {
  render() {
    return (
      <h1 className="logo">
        <img src="/img/brand/logo.png" />
      </h1>
    );
  }
};

为什么会_classCallCheck在IE9中触发这个,为了防止它,我可以做些什么？

Answer 1

事实证明，IE9存在以下问题：

1.

import React, { Component } from 'react';

export default class Whatever extends Component { ...

我不得不import React;然后... extends React.Component。

2.

我必须将我的connected 组件导出为非顶级组件，即在文件中给它们一个名称：

export class App extends React.Component {
  ...
}

export const AppContainer = connect(state => ({ routerState: state.router }), { pushState }) (App);

3.

我必须禁用livereactload https://github.com/milankinen/livereactload，特别是将其.babelrc从babel-plugin-react-transform.

只有完成所有这些步骤，我的应用程序才能在 IE9 上令人满意地运行。