在哪里可以找到要添加到 babel.config.js 的 polyfill 名称

Question

babel docs 链接到 github.com/zloirock/core-js 以获得可以使用的 polyfill。我们目前正在使用es6.array.iterator、es6.promise、es7.promise.finally、es6.object.assign、es6.symbol、es6.map。这些大多与 github 页面上的内容一致，但未直接列出。

但是我现在想添加url and url-search-params，但无法确定在 babel 配置中使用什么魔法字符串。某处是否有所有有效 babel polyfill 的列表？

这就是我们的 babel.config.js 当前的样子：

module.exports = {
    presets: [
        [
            '@vue/app',
            {
                polyfills: [
                    'es6.array.iterator',
                    'es6.promise',
                    'es7.promise.finally',
                    'es6.object.assign',
                    'es6.symbol',
                    'es6.map',
                ],
            },
        ],
    ],
    sourceType: 'unambiguous',
};

Answer 1

乍一看core-js 的文档本身并没有提供列表，但在阅读了一些之后我发现了这个URL and SearchParams。根据这个文档，我认为您应该在 polyfills 数组中包含 web.url、web.url.to-json、web.url-search-params 以启用此功能。但是，我认为有一种方法可以包含core-js，然后使用browserlist 之类的内容仅针对您需要支持的浏览器。希望这对您有所帮助。干杯，西格弗里德。

编辑： 为了完整起见，我已经包含了我正在谈论的选项，因为您可以看到这是一个 React 项目，但我认为只需稍加调整，您就可以在 Vue.js 项目中完成这项工作。

编辑#2： 我想这就是我们要找的名单 :) Core-JS Polyfills

babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ["last 2 versions", "not dead", "not < 2%"],
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

app.js

import React from 'react'
import '@babel/polyfill'
import ReactDOM from 'react-dom'

import App from './App'
import DefaultErrorBoundary from './DefaultErrorBoundary'
import './main.scss'

if (process.env.NODE_ENV === 'development') {
  const axe = require('react-axe')
  axe(React, ReactDOM, 1000)
}

ReactDOM.render(
  <React.StrictMode>
    <DefaultErrorBoundary>
      <App />
    </DefaultErrorBoundary>
  </React.StrictMode>,
  document.getElementById('app')
)