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

时间:2018-10-04 14:16:00

标签: reactjs internet-explorer react-router babel babel-polyfill

我遇到react-redux的问题,即(目标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中:空白页... /整理器无法初始化,无法使用

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

Thx

1 个答案:

答案 0 :(得分:0)

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

示例(pacakge.json):

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

请注意,您需要使用babel预设环境才能工作。