且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Webpack - 包:@babel/polyfill 已被弃用 - 如何使用替代方案?

更新时间:2023-09-28 08:10:34

core-js 目前正在取代 bable-polyfill.除了 .babelrc 文件之外,您不必在任何地方设置它我有一个问题,你为什么要复制你有 @babel/polyfill babel-pollyfill 的库这同样适用于 @babel/preset-env babel-preset-en.您已经在 .babelrc corejs 中声明,但我没有看到 package.json 已安装?

core-js is currently replacing bable-polyfill. You do not have to set it anywhere except for the .babelrc file I have a question, why do you duplicate libraries you have @babel/polyfill and babel-pollyfill the same applies to @babel/preset-env and babel-preset-en. You have declared in .babelrc corejs but I do not see that package.json has been installed?

我的示例 可能不完美,但我尝试为之奋斗:)

My example may not be perfect but I try to strive for it :)

.babelrc

{
 "presets": [
   [
    "@babel/preset-env",
    {
     "useBuiltIns": "usage",
     "corejs": 3
    }
   ]
  ]
}

package.json

"devDependencies": {
  "@babel/core": "^7.5.5",
  "@babel/preset-env": "^7.5.5",
  "babel-loader": "^8.0.6",
  "core-js": "^3.1.4" // this is now your polyfill
  ...
}

webpack.config.js

entry: {
  app: './index.js',
},

index.js

import './style.scss';
import module from './module.js';
...

更新

添加到package.json,你可以准备自己的支持浏览器列表

add to package.json, you can prepare your own list of supported browsers

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

添加到.babelrc

{
  "debug": true,
  "useBuiltIns": "usage",
  "corejs": 3
}

在控制台中进行所有这些额外更改之后,将显示支持哪些浏览器以及添加了哪些 pollyfill.当然,最重要的是在 IE11 中进行测试.我总是在 6-7 个桌面浏览器和 3-4 个移动浏览器上进行测试.

After all these additional changes in the console will appear what browsers are supported and what pollyfill have been added. And of course the most important thing is to test it in IE11. I always test on 6-7 desktop and 3-4 mobile browsers.