Babel 7 + react + redux => 在 IE / 旧 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 中，我得到：“答案是：42”

在 IE11 中：空白页 ... / Collat​​or 无法初始化并且不会被使用

在 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 预设环境才能使其工作。