Babel

Babel 是一个 JavaScript 编译器。将源代码转换为目标代码。

AST抽象语法树⇒Transform⇒Genarate

官网 https://babeljs.io/ 查看AST https://astexplorer.net/ Babel所有的包 https://babeljs.io/docs/babel-traverse

核心功能

1. 语法转换：将新版本的 JavaScript 语法转换为旧版本的语法。比如es6语法转es5。
2. Polyfill：通过引入额外的代码，使新功能在旧浏览器中可用。比如es6新增的api（新特性）。
3. JSX: 将JSX语法转换成普通的JavaScript语法让浏览器识别。
4. 插件: 为Babel提供自定义功能

1.语法与特性

• 1.1 语法
  • 定义：语法是指编程语言的规则和结构，规定了代码如何书写和组织。
  • 作用：语法是语言的基础，确保代码能够被正确解析和执行。
  • 特点：

    • 固定且严格，例如变量声明、函数定义、条件语句等。

    • 例如：

      复制代码letx =10;// 变量声明语法if(x >5) {// 条件语句语法console.log("x 大于 5"); }

  • 例子：
    • let、const、function 等关键字。
    • 花括号 {} 表示代码块。
    • 分号 ; 用于语句结束（可选）。
• 1.2. 特性
  • 定义：特性是指语言提供的功能或能力，用于实现特定的行为或效果。
  • 作用：特性扩展了语言的功能，使开发者能够更高效地完成任务。
  • 特点：

    • 通常是语言版本更新时新增的功能。

    • 不同的特性可能需要特定的运行环境支持（如 ES6 特性需要现代浏览器支持）。

    • 例如：

      复制代码constarr = [1,2,3];constdoubled = arr.map(x =>x *2);// ES6 的箭头函数特性console.log(doubled);// [2, 4, 6]

  • 例子：
    • ES6 的 箭头函数、解构赋值。
    • ES2020 的 可选链操作符（?.）。
    • ES2021 的 逻辑赋值运算符（如 ||=）。