如何将本地关键字别名添加到Babel

Babel 关键字 解析器
2021-01-14 09:55:24
174 0 0

关注这篇博文的人都知道,不是每一篇博文都是对一种技术的认可,而只是一个如何完成某件事的教程。有时所描述的技术可能不是您应该做的事情。这是其中一篇博客文章。

Babel解析器是当今web堆栈中必不可少的工具。Babel帮助我们在JavaScript模式进入浏览器之前使用它们(可选的链接),以及React中的JSX。这让我想到:写一个Babel扩展来允许我们使用关键字别名(如fn而不是function)会有多容易?让我们一起来看看!

用Babel创建关键字别名比您想象的要简单和困难。从简单的角度来看,它本质上只是一行代码。消极的一面是,您需要修改Babel的核心解析器代码。

作为我们的例子,假设我们想为JavaScript的function关键字创建别名fn。一个示例代码片段如下:

// Named function
fn myFunction() {
    return true;
}

// Function as variable
const myOtherFunction = fn() {

}

// Instantly executing function
(fn() {

})();

解析之后,我们希望将所有fn实例替换为function。要创建这个别名,我们需要修改文件后面的createKeyword

// File: packages/babel-parser/src/tokenizer/types.js
// We'll be adding one line
// ...
function createKeyword(name: string, options: TokenOptions = {}): TokenType {
  options.keyword = name;
  const token = new TokenType(name, options);
  keywords.set(name, token);

  // ADD THIS LINE:
  if (name === "function") keywords.set("fn", token);

  return token;
}
// ...

要解析一个示例文件,我可以运行:

node packages/babel-parser/bin/babel-parser.js /path/to/sample-file.js

当解析器遇到fn的实例时,它将提供以下信息:

{
        "type": "FunctionDeclaration",
        "start": 0,
        "end": 36,
        "loc": {
          "start": {
            "line": 1,
            "column": 0
          },
          "end": {
            "line": 3,
            "column": 1
          }
        },
        "id": {
          "type": "Identifier",
          "start": 3,
          "end": 13,
          "loc": {
            "start": {
              "line": 1,
              "column": 3
            },
            "end": {
              "line": 1,
              "column": 13
            },
            "identifierName": "myFunction"
          },
          "name": "myFunction"
        }
// ...

你可能会问自己“我为什么要这么做?!”嗯,您可能不会这样做——修改源代码库以供自己使用是一个维护恶梦,并且在源代码....中使用流氓关键字也是维护的噩梦。

综上所述,如果您想尝试添加自己的关键字别名,那么修改Babel源是最好的选择。我希望有一种方法可以编写一个扩展来实现这一点。

作者介绍

用微信扫一扫

收藏