前言
前端开发中，我们经常会使用一些新特性和 API，然而这些新特性和 API 并不是所有浏览器都支持的。为了能够在不同浏览器上稳定地运行我们的应用程序，我们需要使用 polyfill。而其中一个 polyfill 库就是 core-js。
core-js 是一个非常强大的 polyfill 库，它支持 ES5/6/7/8/9、新的 DOM API 等，这些都是不同浏览器上不同版本的 JavaScript 所支持的特性。但是在不同项目中，有时我们需要支持的特性可能是不同的，那么如何按需加载 core-js 呢？core-js-compat 就可以帮助我们解决这个问题。
在本篇文章中，我们将详细介绍 npm 包 core-js-compat 的使用方法，帮助大家准确高效地应用 core-js-compat。
安装和使用
首先，我们需要先安装 core-js-compat：
npm install core-js-compat
在我们的项目中，我们需要根据需求引入不同的 core-js 内容，而 core-js-compat 就是一个方便的兼容性检查工具。它提供了出现在不同版本 JavaScript 引擎中的方法和特性，且对于现代 JavaScript 引擎，它只提供必需的 polyfill。
core-js-compat 检测文件支持的特性，返回一个字符串数组。核心思想是：检测需要的功能是否能够使用本地支持的标准，如果不支持，则使用 polyfill 方式来实现支持。
除了上述功能，我们可以使用以下方法查看可用的版本及其兼容性：
const compatData = require('core-js-compat/data'); console.log(compatData);
该库同样支持通过挂载构造器的方式来实现兼容性检测：
-- -------------------- ---- ------- ----- - ---- - - -------------------------- ----- ------ - ------ --------- - ------- ----- -------- ----- ------- ----- ---------------------- ----- ----------------------- ----- ----- ----- --- ----- ---- ----- ------- ---- - --- --------------------------- -- ---- -- ----- --------- -- ---- -----------展开代码
除了上述使用方式，我们还可以配置 webpack，加载我们需要的 polyfill：
-- -------------------- ---- ------- -- ----------------- -------------- - - ------ ----------- ------- - --------- ------------ -- ------- - ------ -- ----- -------- -------- ---------------------------------- ---- - ------- --------------- -------- - -------- ---------------------- -------- - - ---------------------------------- - ------------ ----- - - - - - -- - --展开代码
示例代码
-- -------------------- ---- ------- ------ ----------------- ------ ------------------------------ ----- ----------------- - ----- -- -- - ------ ---------------------------- -- ----- -------- ----------- - ----- -------- - ----- -------------------- ---------------------- - ------------ ----- --- - --------------------------------------------- -----------------展开代码
在上面的示例代码中，我们引入了 core-js 和 regenerator-runtime，他们是用来实现 async-await 和 generator 的 polyfill。同时我们也使用了 Array.from(), 这个方法是实现 ECMAScript 6 新特性的 polyfill。
总结
在本文中，我们介绍了 core-js-compat 的基本使用方法、webpack 配置方式以及一些示例。在开发中，我们通常只需要引入项目中需要的 polyfill 或者按照兼容性文档的要求引入。
使用 core-js-compat 使我们可以方便地进行按需加载 core-js 内容，避免不必要的资源浪费。同时也能够确保我们的程序在不同浏览器上的一致性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/183582
