\@babel|parser使用教程

资源

官方文档：https://www.babeljs.cn/docs/babel-parser 🔗

在线AST工具：https://astexplorer.net/ 🔗

说明

@babel/parser是Babel最重要的包之一，用于词法分析，即将JavaScript代码转换成AST树，最常见的就是前端中配合webpack打包代码。

包安装：npm install @babel/parser

包引入：const parser = require("@babel/parser").parse;

调用

提供了两个调用方法：

• parser.parse(code, [options]) 解析整个的ECMAScript程序
• parser.parseExpression(code, [options]) 解析单个表达式，如解析x + y * z，这个一般不会用到，官方也是建议有疑惑用parse方法

以下是可能用到的配置参数(非全部)：

• allowImportExportEverywhere: 是否允许import/export在程序代码任意地方使用，默认是能在最顶层使用。
• allowAwaitOutsideFunction: 是否允许await可以在程序代码最顶层使用，默认顶层使用会报错，需要用async函数包裹。
• allowNewTargetOutsideFunction: 是否允许在函数或类之外使用new.target。
• allowReturnOutsideFunction: 是否允许在顶层代码中使用return。
• allowSuperOutsideMethod: 是否允许在类或者对象之外使用super。
• allowUndeclaredExports: 当解析器执行到export时，如果导出的变量未提前申明则会报错，由于有可能在export后面申明的变量，因此可以将该处设置为true避免抛出报错。
• attachComment: 是否丢弃掉注释代码。
• errorRecovery: 遇到报错是否尝试继续解析，设置为true后，当遇到解析错误会将错误存储在错误数组中。
• plugins: 要启用的插件列表。
• sourceType: 值可以是script、module和unambiguous，根据情况选择，默认是script。
• sourceFilename: 是否将输出AST节点与其源文件名相关联，当存在多个输入文件是可以开启。
• startColumn: 解析开始的列号，默认为0表示第1列。
• startLine: 解析开始的行号，默认为0表示第1行。
• strictMode: 是否开启严格模式。
• tokens: 将所有已解析的标记添加到文件节点上的tokens属性中。

返回

生成的AST树格式遵循Babel AST规范，虽然是借鉴的ESTree，但仍有些许不同:

• Literal细分为StringLiteral、NumericLiteral、BigIntLiteral、BooleanLiteral、NullLiteral、RegExpLiteral
• Property细分为ObjectProperty、ObjectMethod
• MethodDefinition细分为ClassMethod、ClassPrivateMethod
• PropertyDefinition细分为ClassProperty、ClassPrivateProperty
• PrivateIdentifier细分为replaced、PrivateName
• ChainExpression细分为OptionalMemberExpression、OptionalCallExpression
• ImportExpression替换为CallExpression
• Program and BlockStatement contain additional directives field with Directive and DirectiveLiteral
• ClassMethod, ClassPrivateMethod, ObjectProperty, and ObjectMethod value property’s properties in FunctionExpression is coerced/brought into the main method node.

示例

let a = 10

{
  "type": "File",
  "start": 0,
  "end": 10,
  "loc": {
    "start": {
      "line": 1,
      "column": 0,
      "index": 0
    },
    "end": {
      "line": 1,
      "column": 10,
      "index": 10
    }
  },
  "errors": [],
  "program": {
    "type": "Program",
    "start": 0,
    "end": 10,
    "loc": {
      "start": {
        "line": 1,
        "column": 0,
        "index": 0
      },
      "end": {
        "line": 1,
        "column": 10,
        "index": 10
      }
    },
    "sourceType": "script",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "start": 0,
        "end": 10,
        "loc": {
          "start": {
            "line": 1,
            "column": 0,
            "index": 0
          },
          "end": {
            "line": 1,
            "column": 10,
            "index": 10
          }
        },
        "declarations": [
          {
            "type": "VariableDeclarator",
            "start": 4,
            "end": 10,
            "loc": {
              "start": {
                "line": 1,
                "column": 4,
                "index": 4
              },
              "end": {
                "line": 1,
                "column": 10,
                "index": 10
              }
            },
            "id": {
              "type": "Identifier",
              "start": 4,
              "end": 5,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 4,
                  "index": 4
                },
                "end": {
                  "line": 1,
                  "column": 5,
                  "index": 5
                },
                "identifierName": "a"
              },
              "name": "a"
            },
            "init": {
              "type": "NumericLiteral",
              "start": 8,
              "end": 10,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 8,
                  "index": 8
                },
                "end": {
                  "line": 1,
                  "column": 10,
                  "index": 10
                }
              },
              "extra": {
                "rawValue": 10,
                "raw": "10"
              },
              "value": 10
            }
          }
        ],
        "kind": "let"
      }
    ],
    "directives": []
  },
  "comments": []
}