webpack打包vue（3）@babel/polyfill

@babel/polyfill使用有2种用法

安装

npm i @babel/polyfill -D

(1)在.babelrc里添加

{
    "presets": [
      ["@babel/preset-env", {
        "targets": {
            "chrome": "70",
            "ie": "8"
          },
        // 按需注入
        // "useBuiltIns": "usage",
        "corejs": "2" // 这里需要注意：是根据你的版本来写
      }]
    ]
  }

(2)也可以

{
    "presets": [
      ["@babel/preset-env", {
        "targets": {
            "chrome": "70",
            "ie": "8"
          },
        "corejs": "2" // 这里需要注意：是根据你的版本来写
      }]
    ]
  }

然后在打包入口添加 entry:{ app:["@babel/polyfill","src/main.js"] }

这2种用法都可以，但我推荐使用第一种，第一种是按需载入，打包后体积要比后一种少很多 主要是useBuiltIns区别，

false或没有

"useBuiltIns": false, 此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。

entry

"useBuiltIns": "entry", "corejs": 2, 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

这里需要指定 core-js 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成 import 'core-js/stable'; import 'regenerator-runtime/runtime';

usage

"useBuiltIns": "usage", "corejs": 2, usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。

当我们开发的是组件库、工具库这些场景polyfill就不合适了，因为polyfill是注入到全局变量window下的，会污染全局环境，所以推荐闭包方式：@babel/plugin-transform-runtime 具体推荐链接 @babel/plugin-transform-runtime