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

不念不忘少年蓝@ 2023-02-21 14:24 17阅读 0赞

*那些关注此博客的人都知道，并非每篇博客文章都对一种技术表示认可，而只是一篇有关如何完成某事的教程。* *有时描述的技术可能不是您应该做的。* *这是这些博客文章之一。*

[如今，Babel解析器][Babel]是Web堆栈中必不可少的工具。 Babel帮助我们在JavaScript模式和浏览器（可选的链接）以及JSX for React一起使用之前使用它们。 这让我开始思考：编写Babel扩展以允许我们使用关键字别名（例如`fn`而不是`function`有多容易？ 我们来看一下！

与Babel相比，使用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源是您的最佳选择。 我很想知道是否有一种方法可以编写扩展来完成此任务。 非常感谢[Logan Smyth][]帮助我浏览Babel资源！

> 翻译自: [https://davidwalsh.name/add-babel-keyword][https_davidwalsh.name_add-babel-keyword]

[Babel]: https://github.com/babel/babel
[Logan Smyth]: https://twitter.com/loganfsmyth
[https_davidwalsh.name_add-babel-keyword]: https://davidwalsh.name/add-babel-keyword