广州自助网站推广制作,做网站工作,湖南网站制作收费标准,洛阳直播网站建设文章目录 core-js是什么#xff0c;有什么用#xff1f;为什么使用了babel-loader对js进行兼容性配置还需要core-js?core-js的具体用法总结 core-js是什么#xff0c;有什么用#xff1f;
core-js是一个流行的JavaScript库#xff0c;它提供了对新的JavaScript特性、API… 文章目录 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-js2.项目中使用 方式一: 直接在入口文件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应用程序的跨浏览器支持为用户提供更好的体验
