Babel

概念

Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程,能够将源代码转换为目标代码。

  • 语法转换:将新版本的 JavaScript 语法转换为旧版本的语法
  • Polyfill:通过引入额外的代码,使新功能在旧浏览器中可用
  • JSX: 将JSX语法转换成普通的JavaScript语法
  • 插件: 为Babel提供自定义功能

官网 babeljs.io/

代码对应的 AST 手相语法树: astexplorer.net/

Babel所有的包 babeljs.io/docs/babel-...

  • @babel/parser:将代码通过一些配置转为 AST 抽象语法树。
  • @babel/traverse: 转换内部的一些操作。
  • @babel/generator:生成最终的结果。
  • @babel/core:整合了整合过程(核心包)。
  • @babel/preset-env:es6 -> se5 的核心包。

我们可以通过以下库将 js 新语法转为旧语法:

shell 复制代码
npm install --save-dev @babel/core @babel/cli @babel/preset-env

支持新特性(原理是判断对象的原型上是否存在某个方法):

shell 复制代码
npm i core-js -D

支持 tsx / jsx :

shell 复制代码
npm install @babel/preset-react -D

core-js

core-js 是一个模块化的 JavaScript 标准库,为 ECMAScript 提供 polyfill(补丁)。

它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为,尤其是提供对较新 ECMAScript 特性(如 Promise、Symbol、Object.assign 等)的支持。

1)Polyfill 的概念:

Polyfill 是一段代码,用来实现浏览器中原生未支持的功能。随着 JavaScript 标准不断更新,新的特性和功能被添加,但并不是所有的浏览器都能及时支持这些新特性。

这时候 polyfill 就显得尤为重要,它模拟了这些新特性,使得老旧浏览器也能够"理解"并执行这些新的语法和功能。

2)core-js 的模块化设计:

core-js 是模块化的,这意味着开发者可以按需引入自己需要的 polyfill,而不是全部引入,这不仅能减少代码体积,还有助于提高性能。

例如,如果你只需要使用 Promise,那么可以只引入 core-js 的 Promise 模块:

javascript 复制代码
import 'core-js/modules/es.promise';

3)与 Babel 的集成:

core-js 通常与 Babel 一起使用。当你使用 Babel 编译代码时,它能够自动根据你的目标环境(如浏览器版本)添加所需的 polyfill。

例如,Babel 插件 @babel/preset-env 可以与 core-js 配合使用,通过设置 useBuiltIns 选项指定 polyfill 的使用方式:

json 复制代码
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3  // corejs的版本
    }]
  ]
}

这段配置会根据你的代码,仅引入那些你实际用到的 polyfill,从而优化项目的构建体积。

相关推荐
小政爱学习!13 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。19 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼25 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093328 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙