Babel 对 Object.fromEntries 的支持答案

【问题标题】：Babel support for Object.fromEntriesBabel 对 Object.fromEntries 的支持
【发布时间】：2022-11-09 06:52:59
【问题描述】：

我正在通过WebView 在 React Native 中运行一个 React Web 应用程序。

该网站使用Object.fromEntries，我正在使用的设备上的浏览器似乎无法使用它，并在我尝试调用Object.fromEntries 时导致我的webapp 崩溃（没有错误）。

该设备运行的是 Android 8.1.0，因此我认为它将使用不支持 Object.fromEntries 的旧版 Android 浏览器。

在我的网络应用程序 babel 配置中，我试图以 Android 8.0 为目标，但是当调用 Object.fromEntries 时应用程序仍然崩溃。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false,
        "shippedProposals": true,
        "targets": {
          "Android": "8.0",
          "browsers": ["last 2 version"]
        }
      }
    ],
    [
      "@babel/preset-react",
      {
        "useBuiltIns": true,
        "pragma": "React.createElement"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "babel-plugin-macros",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "regenerator": true
      }
    ]
  ]
}

我是否需要在 babel 配置中包含其他内容，或者可能覆盖它的内容（即 Typescript）？

【问题讨论】：

“我还有什么需要做的吗”做？是的。摆脱安卓8o.O

标签： javascript android reactjs react-native babeljs

【解决方案1】：

在 Android 8 Chrome 浏览器中加载网页时，我遇到了类似的问题。这两个更改帮助我解决了这个问题：

1.手动添加polyfills

添加您的依赖项

yarn add react-app-polyfill
yarn add object.fromentries

然后，在您的应用程序的根目录 (index.js)，添加以下两个导入：

import 'react-app-polyfill/stable';
import fromEntries from 'object.fromentries';
fromEntries.shim(); // will be a no-op if not needed

2.更改构建目标

我正在使用 create-react-app 而不是直接配置 babel，所以这对你来说可能会有所不同，但我将我的 browserslist 设置更改为

    ">0.2%",
    "not dead",
    "not op_mini all"

【讨论】：