如何设置useBuiltIns选项？

Question

我使用Webpack，想设置Babel的 "useBuiltIns "选项来启用JS文件中 "承诺 "的pollyfills。

我找不到一个完整的例子，我所有的尝试都以错误告终。

这是我的package.json尝试。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@babel/polyfill": "^7.10.1",
    "bootstrap": "^4.5.0",
    "flatpickr": "^4.6.3",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.1",
    "lazysizes": "^4.1.7",
    "leaflet": "^1.6.0",
    "lg-thumbnail": "^1.2.0",
    "lightgallery": "^1.7.0",
    "owl.carousel": "^2.3.4",
    "popper.js": "^1.16.1",
    "slick-carousel": "^1.8.1",
    "yuglify": "^0.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel": "^6.23.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "react": "^16.13.1",
    "sass": "^1.26.8",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-bundle-tracker": "0.4.3",
    "webpack-cli": "^3.3.11",
    "webpack-merge": "^4.2.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.dev.js --watch",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "useBuiltIns": "entry" <------ this is not working
  }
}

根据文档，有一个选项： "useBuiltins "可用(https:/babeljs.iodocsenbabel-polyfill#在node-browserify-webpack中使用。)

根据文档，我可以将Babel选项放到我的package.json中的 "babel "下面(https:/babeljs.iodocsen6.26.3babelrc。)

Answer 1

@babelpolyfill已经废弃，请使用core-js和regenerator。这是来自 https:/babeljs.iodocsenbabel-preset-env。 "由于@babelpolyfill在7.4.0中已被废弃，我们建议直接添加core-js并通过corejs选项设置版本。"

你的预设将看起来像

const presets = [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true }
      }
    ],

并安装

 "core-js": "^3.6.5",
"regenerator-runtime": "^0.13.5",

最后将@babelpolyfill的导入替换为

import 'core-js/stable';
import 'regenerator-runtime/runtime';

同时您也可以将浏览器列表的目标设置成相应的polyfill。

例如：

"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11"
  ]