当前位置: 首页 > news >正文

Webpack5 core-js和babel-loader区别和用法

文章目录

  • core-js是什么,有什么用?
  • 为什么使用了babel-loader对js进行兼容性配置还需要core-js?
  • core-js的具体用法
  • 总结


core-js是什么,有什么用?

core-js是一个流行的JavaScript库,它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能,并提供polyfill来使这些功能可以在旧版浏览器中正常运行

polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,使用该新特性。

为什么使用了babel-loader对js进行兼容性配置还需要core-js?

在Webpack 5中,使用babel-loader对JavaScript进行兼容性配置可以将新版本的JavaScript语法转换为低版本的语法,以便在旧版浏览器中正常运行。然而,babel-loader只会处理语法转换,而不会处理新增的API或全局对象。对于一些新的API(如Promise、Array.from等)或全局对象(如Symbol、Map等),我们仍然需要使用core-js来提供兼容性支持。

core-js的具体用法

1.安装core-js:通过npm或yarn安装core-js到你的项目中。

npm i core-js

2.项目中使用
方式一:
直接在入口文件import整个包 引入
缺点:假如只用到了一部分corejs的功能,整包引入导致编译后体积过大

import "core-js";

方式二:
按需引入
比如项目中使用了promise语法,就使用import 'core-js/es/promise’引入promise模块

方式三:
自动按需引入(最推荐),配置babel.config.js, 这样就可以根据项目中用到的语法进行依赖

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

总结

通过使用babel-loader进行语法转换只能解决部分兼容性问题,而对于新增的API和全局对象,我们需要借助core-js来提供兼容性支持。核心思想是使用polyfill模拟缺失的功能,从而使JavaScript应用程序能够在各种浏览器中工作。通过合理配置Webpack和使用core-js,我们可以大大提升JavaScript应用程序的跨浏览器支持,为用户提供更好的体验

http://www.lryc.cn/news/120968.html

相关文章:

  • 软考高级架构师——5、系统规划分析与设计方法
  • 区块链学习6-长安链部署:如何创建特定共识节点数和同步节点数的链
  • 北航基于openEuler构建工业机器人操作系统,打造“开箱即用”的机器人基础软件平台
  • 孤儿进程与僵尸进程
  • redis的基础命令01
  • 批量将excel文件合并
  • 关于Vue与服务器端的通信:如何实现登录鉴权
  • GrapeCity Documents for Excel, .NET Crack
  • wordpress网站Ajax留言评论+自定义评论字段
  • AJAX-笔记(持续更新中)
  • 模板复用和文章详情页(Go搭建qiucode.cn 之七)
  • Android 使用SQLite的案例详解
  • linux 命令--查看网络端口命令
  • python一个请求chatgpt3.5模型例子
  • 数据结构:栈的实现(C实现)
  • v-md-editor自定义锚点(生成目录)数组转树结构
  • java 11 新特效解读(2)
  • linux patch 和 git patch
  • 【vue Dplayer】播放hls视频流
  • 给不蒜子(busuanzi)统计数据增加初始值
  • WebStorm
  • 代码随想录算法训练营day59
  • 大模型训练时间估算
  • 函数的模拟实现
  • CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题(设置postman超时时间)(接口提供者设置了nginx超时时间)
  • 什么是 CSRF 攻击?
  • [内网渗透]CFS三层靶机渗透
  • 一百五十一、Kettle——Linux上安装的kettle8.2开启carte服务以及配置子服务器
  • 2023高教社杯数学建模A题 B题C题 D题 E题思路代码分析
  • 从ChatGLM2-6B来看大模型扩展上下文和加速推理相关技术