Babel 7 + react + redux => 在 IE / old FF 上崩溃

Question

我遇到了 react-redux 和 ie（目标 11）的问题。

Project with : 
>     "react": "^16.5.1",
>     "react-dom": "^16.5.1",
>     "react-redux": "^5.0.7",
>     "redux": "^4.0.0",
>     "@babel/XXX" : ^7.0.0

使用 babel 并获得 polyfill：

"babel": {
    "presets": [
      "@babel/preset-react",
      [
        "@babel/preset-env",
        {
          "targets": "> 0.25%, not dead",
          "useBuiltIns": "entry"
        }
      ]
    ],
    "plugins": [
      "react-hot-loader/babel",
      "lodash",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-function-sent",
      "@babel/plugin-proposal-export-namespace-from",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-throw-expressions",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-object-rest-spread"
    ]
  }

代码示例：

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';

class Test extends React.PureComponent {
  render() {
    return (
      <div>
        the anwser is : {this.props.test}
      </div>
    )
  }
}

// with or without compose there is the same result
export default compose (
  connect(
    (state) => ({
      test: 42
    }),{
    })
) (Test);

在 chrome 中，我得到："the answer is: 42"

在 IE11 中：空白页.../Collator 无法初始化且无法使用

在 Firefox 45 中： react-router provider error another error

感谢

Answer 1

您可能想要将 bowserslist 字段添加到 package.json 并将 @babel/polyfill 添加为依赖项。这告诉 babel-preset-env 和 @babel/polyfill 以与浏览器列表中指定的值兼容的方式编译。

示例 (pacakge.json)：

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

请注意，您需要使用 babel preset env 才能正常工作。

Babel 7 + react + redux => 在 IE / old FF 上崩溃

Babel 7 + react + redux => crash on IE / old FF

reactjs

internet-explorer

react-router

babeljs

babel-polyfill