core-js介绍及安装使用

简介: core-js介绍及安装使用

一、core-js到底是什么?

1.  ECMAScript  的迅速成长以及浏览器的频繁更新换代,每年会出现新的 api ,举个例子 es6 时期诞生的  'Promise'  ,'Set'  或者是 'es7'  数组新提供的方法 'includes' ,这些新加入的 'api' ,就引出一个词 "polyfill"  'polyfill(垫片/补丁)' 就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,使用该新特性。新功能的es'api'转换为大部分现代浏览器都可以支持运行的一个'api' 补丁包集合。


2. 因为官方库对他介绍的形容

2.1. 它支持最新的 ECMAScript 标准

2.2. 它支持ECMAScript 标准库提案

2.3. 它支持一些 WHATWG / W3C 标准(跨平台或者 ECMAScript 相关)

2.4. 它最大限度的模块化:你能仅仅加载你想要使用的功能

2.5. 它能够不污染全局命名空间

2.6. 它和babel紧密集成:这能够优化core-js的导入

2.7. 它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式

二、core-js相关功能包.

20210527153548522.png

详情地址:https://github.com/zloirock/core-js/tree/master/packages

https://github.com/zloirock/core-js/tree/master/packages

在'corejs'的工程项目的 packages文件中 中 'https://github.com/zloirock/core-js/tree/master/packages',能看到五个相关包

1.1.  'core-js' 安装'npm install core-js' 作用'定义全局的polyfill'


 1.2. 'core-js-pure' 安装 'npm i core-js-pure' 作用'提供不污染全局环境的polyfill,等价于core-js@2/library'


 1.3. 'core-js-compat'安装'npm i core-js-compat' 作用维护了按照'browserslist'规范的垫片需求数据,来帮助我们找到'符合目标环境'的 'polyfills' 需求集合


 1.4. 'core-js-builder' 安装'npm i core-js-builder' 作用可以被 Node.js 服务使用,构建出不同场景的垫片包。


 1.5.'core-js-builder' 安装'npm i core-js-builder' 作用可以结合 'core-js-compact' 以及 'core-js',并利用 'webpack '能力, 根据需求打包出 core-js 代码

三、如何使用?

1.  安装  npm 方式

// global version
npm install --save core-js@3.18.3
// version without global namespace pollution
npm install --save core-js-pure@3.18.3
// bundled global version
npm install --save core-js-bundle@3.18.3

2.  按需导入或者全局导入

// 导入所有新提案api
import "core-js";
// 唯一稳定的'core js'功能-es和web标准
import "core-js/stable";
// 仅支持稳定的ES功能
import "core-js/es";
// 只导入指定api
import "core-js/features/set";
import "core-js/stable/set";
import "core-js/es/set";

3.  使用demo

主要是因为IE浏览器无法兼容新的语法、api,所以就需要用到core-js进行兼容性处理,从而解决问题。

// first file:
import 'core-js/modules/es.array.iterator';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.set';
var set = new Set([1, 2, 3]);
// second file:
import 'core-js/modules/es.array.of';
var array = Array.of(1, 2, 3);

更多详情大家可以去GitHub参考:地址就在上方

20210527153548522.png

相关文章
|
7月前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
391 4
|
JavaScript 前端开发 NoSQL
【Node.js实战】一文带你开发博客项目之初识Koa2(koa2安装使用、搭建开发环境、测试路由)
【Node.js实战】一文带你开发博客项目之初识Koa2(koa2安装使用、搭建开发环境、测试路由)
449 0
egg.js入门导航:安装使用与学习
egg.js入门导航:安装使用与学习
236 0
egg.js入门导航:安装使用与学习
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
24天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
146 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
87 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
79 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
99 4