Question

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

但是，我现在想添加url and url-search-params，但无法计算出在babel配置中使用哪种魔术字符串。某处是否有所有有效的babel polyfills列表？

这是我们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')
)

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

1 个答案: