@babel_plugin-transform-runtime重复引入问题

@babel_plugin-transform-runtime重复引入问题

在webpack中，将高级API转换依赖于babel插件 @babel/plugin-transform-runtime；
但是在配置好之后发现打包后的文件还是有重复引入问题，也是这个插件没有起到减少代码冗余的问题

// 原来的配置
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    presets:[
      ['@babel/preset-env',{
        useBuiltIns: 'usage', // 按需转译
        // 使用 useBuiltIns 的时候需要安装 core-js
        corejs: 3  // 查看package.json中安装的core-js是哪个版本的，需要配置一下
      }]
    ],
    plugins:[ // babel需要的插件
       "@babel/plugin-transform-runtime", // 这个插件可以实现一次导入，多次使用，不再是使用多少次就导入多少次，减少代码冗余
    ]
  },
  exclude: /node_modules/  // 不处理该文件夹下的js文件
}

解决办法

还需要对 @babel/plugin-transform-runtime 插件进行配置：
corejs:3
配置这个属性需要安装依赖包 ：@babel/runtime-corejs3
！注意：插件后面这个3是根据自己安装的core-js版本来决定的，如果安装的core-js是2版本的，那就安装 @babel/runtime-corejs2

// 新配置
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    presets:[
      ['@babel/preset-env',{
        useBuiltIns: 'usage', // 按需转译
        // 使用 useBuiltIns 的时候需要安装 core-js
        corejs: 3  // 查看package.json中安装的core-js是哪个版本的，需要配置一下
      }]
    ],
    plugins:[ // babel需要的插件
      //"@babel/plugin-transform-runtime", // 这个插件可以实现一次导入，多次使用，不再是使用多少次就导入多少次，减少代码冗余
      ["@babel/plugin-transform-runtime", {
        corejs: 3  // 这样配置需要安装 @babel/runtime-corejs3 包
      }]
    ]
  },
  exclude: /node_modules/  // 不处理该文件夹下的js文件
}