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

文章目录


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到你的项目中。

javascript 复制代码
npm i core-js

2.项目中使用

方式一:

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

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

javascript 复制代码
import "core-js";

方式二:

按需引入

比如项目中使用了promise语法,就使用import 'core-js/es/promise'引入promise模块

方式三:

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

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

总结

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

相关推荐
一只一只妖1 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA2 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
小飞悟25 分钟前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖28 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子37 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang38 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端