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

最新推荐文章于 2024-08-30 08:30:16 发布

cuozhun3051

最新推荐文章于 2024-08-30 08:30:16 发布

阅读量373

点赞数

文章标签： python java javascript linux mysql ViewUI

原文链接：https://davidwalsh.name/add-babel-keyword

版权

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

如今，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资源！