webpack5使用CoreJs解决js代码兼容性

过去我们使用 babel 对 js 代码进行了兼容性处理，其中使用@babel/preset-env 智能预设来处理兼容性问题。

它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等，它没办法处理。

下载

npm i core-js

引入方式一 

直接在入口文件import整个包 引入

缺点：假如只用到了一部分corejs的功能，整包引入导致编译后体积过大。

import "core-js";

引入方式二 

按需引入

import 'core-js/es/promise'

 

引入方式三（推荐）

自动按需引入，配置babel.config.js, 这样就可以根据项目中用到的语法进行依赖。

module.exports = {
    presets: [
      ["@babel/preset-env",{useBuiltIns:'usage',corejs:3}]
    ],
  };