Где найти имена для заполнения, чтобы добавить их в babel.config.js - PullRequest
Новая
       11

Где найти имена для заполнения, чтобы добавить их в babel.config.js

2 голосов
/ 13 мая 2019

babel docs ссылка на github.com / zloirock / core-js для получения полифилов, которые можно использовать.В настоящее время мы используем es6.array.iterator, es6.promise, es7.promise.finally, es6.object.assign, es6.symbol, es6.map.Они в основном совпадают с тем, что находится на странице github, но не перечислены напрямую.

Однако сейчас я хочу добавить url и url-search-params , но не могу определить, какую магическую строку использоватьв конфиге babel.Есть ли где-нибудь список всех допустимых виниловых полифилов?

Вот так выглядит наш 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',
};

1 Ответ

1 голос
/ 13 мая 2019

Документы core-js на первый взгляд не предоставляют список как таковой, но после некоторого чтения я нашел этот URL и SearchParams . В соответствии с этими документами я думаю, что вы должны включить web.url, web.url.to-json, web.url-search-params в массив polyfills, чтобы включить эти функции. Тем не менее, я думаю, что есть способ включить core-js, а затем использовать что-то вроде browserlist для таргетинга только на те браузеры, которые вам нужны. Надеюсь, это поможет вам. Ура, Зигфрид.

EDIT: Для завершения я включил варианты, о которых я говорил, поскольку вы можете видеть, что это проект 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')
)
...