webpack从入门到原理（高级十）—— core-js

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

Core-js

前面我们使用 babel 对 js 代码进行了兼容性处理，其中使用 @babel/preset-env 智能预设来处理兼容性问题。它能将 ES6 的一些语法进行编译转换，比如箭头函数、扩展运算符等。但是如果是 async 函数、promise 对象、数组的一些方法（includes）等它是没有办法处理的。所以此时我们 js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以我们想要将 js 兼容性问题彻底解决，那就要用到core-js了。

core-js 是专门用来做 ES6 以及以上 API 的 polyfill（polyfill 垫片/补丁，就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性）。

如上图,打包后并没有对promise进行兼容性处理，那如果在IE等浏览器运行就会报错，下面就来对它进行处理！

使用

首先需要安装core-js：

npm i core-js

方法1

直接在main.js中引入core-js,这样就会对promise进行自定义实现！

import 'core-js'

方法2

如下图可以看到打包后的core-js文件很大,但是我们只用到了promise的处理,所以我们可以进行按需引入！

按需引入的话，我们可以找到node-modules/core-js/es/promise,在main.js中进行导入手动按需导入即可。

import 'core-js/es/promise'

方法3

为了更加方便,下面写自动按需引入:只需要在babel配置中进行如下配置就可以了：

// babel.config.js
module.exports = {
  // 用来编译ES6的语法
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 按需加载
        corejs: 3
      }
    ]
  ]
}

如上配置之后，即可以自动按需引入,可以参考babel官网

小结

通过corejs的配置，会使得我们代码的兼容性会更加的好，今天是更文的第16天，继续坚持！加油！