Babel 快速上手

💡

什么是 Babel ？

Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者编写下一代 JavaScript 代码（如 ES6/ES2015 及更高版本），并将其转换为向后兼容的 JavaScript 代码，以便在各种环境中运行，包括旧版浏览器。

// es2015 的 const 和 arrow function
const add = (a, b) => a + b;

// Babel 转译后
var add = function add(a, b) {
  return a + b;
};

Babel 提供了插件系统，任何人都可以基于 Babel 编写插件来实现自定义语法转换，这对于开发者来说是个福音。

而这一切的基础需要了解的一个概念：语法树 (Abstract Syntax Tree)，简称：AST 。AST 是一种树状结构，其中每个节点代表代码中的一个元素（如变量声明、函数调用等）。

Babel 是如何工作的 ？

工作原理

1. 解析 (Parsing)

• 输入：Babel 接收原始的 JavaScript 代码。
• 抽象语法树 (AST) ：Babel 使用解析器（如 @babel/parser）将输入的代码转换为抽象语法树 (AST)。

2. 转换 (Transformation)

• 遍历 AST：Babel 遍历生成的 AST，并应用各种插件和预设来对 AST 进行修改。
• 插件 (Plugins) ：每个插件负责处理特定类型的语法或行为。例如，@babel/plugin-transform-arrow-functions 会将箭头函数转换为普通函数。
• 访问者模式 (Visitor Pattern) ：Babel 使用访问者模式来遍历 AST。每个插件可以定义访问者方法，这些方法会在遍历过程中被调用。访问者方法可以修改当前节点或其子节点。
• 生成新的 AST：经过插件处理后，AST 可能会发生变化，形成一个新的 AST。

3. 生成 (Generation)

• 输出代码 ：Babel 使用生成器（如 @babel/generator）将修改后的 AST 转换回 JavaScript 代码。
• 源码映射 (Source Maps) ：如果需要，Babel 会生成源码映射文件，以便在调试时将编译后的代码映射回原始代码。

具体步骤

1. 输入代码：

   const add = (a, b) => a + b;
   console.log(add(2, 3));

2. 解析成 AST：

   {
     "type": "Program",
     "body": [
       {
         "type": "VariableDeclaration",
         "declarations": [
           {
             "type": "VariableDeclarator",
             "id": {
               "type": "Identifier",
               "name": "add"
             },
             "init": {
               "type": "ArrowFunctionExpression",
               "params": [
                 {
                   "type": "Identifier",
                   "name": "a"
                 },
                 {
                   "type": "Identifier",
                   "name": "b"
                 }
               ],
               "body": {
                 "type": "BinaryExpression",
                 "operator": "+",
                 "left": {
                   "type": "Identifier",
                   "name": "a"
                 },
                 "right": {
                   "type": "Identifier",
                   "name": "b"
                 }
               }
             }
           }
         ],
         "kind": "const"
       },
       {
         "type": "ExpressionStatement",
         "expression": {
           "type": "CallExpression",
           "callee": {
             "type": "Identifier",
             "name": "console.log"
           },
           "arguments": [
             {
               "type": "CallExpression",
               "callee": {
                 "type": "Identifier",
                 "name": "add"
               },
               "arguments": [
                 {
                   "type": "Literal",
                   "value": 2,
                   "raw": "2"
                 },
                 {
                   "type": "Literal",
                   "value": 3,
                   "raw": "3"
                 }
               ]
             }
           ]
         }
       }
     ]
   }

3. 应用插件进行转换：

   • 假设我们使用了 @babel/plugin-transform-arrow-functions 插件，该插件会将箭头函数转换为普通函数。
   • 插件会修改 AST，将 ArrowFunctionExpression 节点转换为 FunctionExpression 节点。

4. 生成新的 AST：

   {
     "type": "Program",
     "body": [
       {
         "type": "VariableDeclaration",
         "declarations": [
           {
             "type": "VariableDeclarator",
             "id": {
               "type": "Identifier",
               "name": "add"
             },
             "init": {
               "type": "FunctionExpression",
               "id": null,
               "params": [
                 {
                   "type": "Identifier",
                   "name": "a"
                 },
                 {
                   "type": "Identifier",
                   "name": "b"
                 }
               ],
               "body": {
                 "type": "BlockStatement",
                 "body": [
                   {
                     "type": "ReturnStatement",
                     "argument": {
                       "type": "BinaryExpression",
                       "operator": "+",
                       "left": {
                         "type": "Identifier",
                         "name": "a"
                       },
                       "right": {
                         "type": "Identifier",
                         "name": "b"
                       }
                     }
                   }
                 ]
               }
             }
           }
         ],
         "kind": "const"
       },
       {
         "type": "ExpressionStatement",
         "expression": {
           "type": "CallExpression",
           "callee": {
             "type": "Identifier",
             "name": "console.log"
           },
           "arguments": [
             {
               "type": "CallExpression",
               "callee": {
                 "type": "Identifier",
                 "name": "add"
               },
               "arguments": [
                 {
                   "type": "Literal",
                   "value": 2,
                   "raw": "2"
                 },
                 {
                   "type": "Literal",
                   "value": 3,
                   "raw": "3"
                 }
               ]
             }
           ]
         }
       }
     ]
   }

5. 生成最终代码：

   const add = function (a, b) {
     return a + b;
   };
   console.log(add(2, 3));

如何写一个babel插件 ?

步骤 1: 安装必要的依赖

首先，你需要安装 Babel 和相关工具。你可以使用 npm 或 yarn 来安装这些依赖。

npm install --save-dev @babel/core @babel/preset-env @babel/cli

步骤 2: 创建插件文件

创建一个新的 JavaScript 文件来编写你的插件。假设我们创建一个名为 my-babel-plugin.js 的文件。

步骤 3: 编写插件

Babel 插件的基本结构包括一个函数，该函数返回一个对象，其中包含 visitor 属性。visitor 对象定义了对 AST 节点的处理逻辑。

示例：将所有字符串字面量替换为大写，并将所有的 var 声明替换为 let

// my-babel-plugin.js
module.exports = function() {
  return {
    visitor: {
      StringLiteral(path) {
        // 获取当前字符串字面量的值
        const oldValue = path.node.value;
        
        // 将字符串转换为大写
        const newValue = oldValue.toUpperCase();
        
        // 替换节点的值
        path.node.value = newValue;
      }
      VariableDeclaration(path) {
        if (path.node.kind === 'var') {
          path.node.kind = 'let';
        }
      }
    }
  };
};

步骤 4: 配置 Babel 使用插件

在项目的根目录下创建或编辑 .babelrc 文件（或 babel.config.json），并添加你的插件配置。

{
  "presets": ["@babel/preset-env"],
  "plugins": ["./my-babel-plugin"]
}

步骤 5: 测试插件

创建一个示例 JavaScript 文件 example.js 来测试你的插件。

// example.js
var greeting = "hello, world!";
console.log(greeting);

然后使用 Babel 命令行工具编译这个文件：

npx babel example.js --out-file example-compiled.js

检查生成的 example-compiled.js 文件，你应该会看到字符串已经被转换为大写：

let greeting = "HELLO, WORLD!";
console.log(greeting);