为什么 create-react-app 中的 Babel 不能正确填充 Array.prototype.at ？

Question

我遇到了一个问题并发现它是因为 Babel 没有.at默认填充

根据spec，Array.prototype.at只是第4阶段，我已经将browserslist设置为> 0.2%，其中包括Chrome 86（尚不支持.at）

为什么 Babel 不使用 polyfill .at 呢？

巴别塔游乐场

Answer 1

嘿伙计们，我相信我喜欢这个理由；

TLDR，CRA 为 babel 设置了错误的 core-js 版本配置

我正在使用 create-react-app 来构建我的网络应用程序，根据官方文档，我喜欢在安装 core-js 并导入入口文件后，polyfill 无法正常工作；

关键原因在于babel-preset-react-app，CRA预先配置好的、用户不易修改的babel配置，是3针对cors-js版本设置的； 代码在这里

鉴于Babel 文档强烈建议使用次要版本，或者：

建议指定次要版本，否则“3”将被解释为“3.0”，可能不包含最新功能的填充。

综上所述，无论我们安装哪个版本的 corejs，它总是使用3.0version 的 polyfill 规则，这会导致某些功能的 polyfill 出现错误，例如Array.prototype.at;

并且有一些方法可以解决这个问题

如果你使用纯 CRA，你必须这样做才能将所有 core-js 导入到你的捆绑结果中；

import R from "core-js/stable";
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// eslint-disable-next-line no-unused-expressions
R;

如果你使用像react-app-rewired或craco这样的东西，你可以通过更优雅的方式通过更正babel-preset-react-appnode_modules中的代码来实现这一点：

import R from "core-js/stable";
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// eslint-disable-next-line no-unused-expressions
R;