如何设置使用内置选项

Question

我正在使用 Webpack，并希望设置 Babel "useBuiltIns" 选项以在我的 JS 文件中启用 "promises" 的 pollyfills。

我找不到完整的工作示例，我所有的尝试都以错误告终。

这是我的包.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
}
}

根据文档，有一个选项。"使用内置"可用 (https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack(

根据文档，我可以将 Babel 选项放入我的 package.json 中的 "babel" (https://babeljs.io/docs/en/6.26.3/babelrc(

Answer 1

@babel/polyfill 已弃用 core-js 和 regenerator。这是来自 https://babeljs.io/docs/en/babel-preset-env"由于 @babel/polyfill 在 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",

最后将@babel/填充导入替换为

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

您还可以相应地将浏览器列表目标设置为填充代码

例如

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