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

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

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源是最好的选择。我希望有一种方法可以编写一个扩展来实现这一点。