關(guān)注這篇博文的人都知道，不是每一篇博文都是對一種技術(shù)的認可，而只是一個如何完成某件事的教程。有時所描述的技術(shù)可能不是您應該做的事情。這是其中一篇博客文章。

Babel解析器是當今web堆棧中必不可少的工具。Babel幫助我們在JavaScript模式進入瀏覽器之前使用它們(可選的鏈接)，以及React中的JSX。這讓我想到:寫一個Babel擴展來允許我們使用關(guān)鍵字別名(如fn而不是function)會有多容易?讓我們一起來看看!

用Babel創(chuàng)建關(guān)鍵字別名比您想象的要簡單和困難。從簡單的角度來看，它本質(zhì)上只是一行代碼。消極的一面是，您需要修改Babel的核心解析器代碼。

作為我們的例子，假設我們想為JavaScript的function關(guān)鍵字創(chuàng)建別名fn。一個示例代碼片段如下:

// Named function fn myFunction() {     return true; } // Function as variable const myOtherFunction = fn() { } // Instantly executing function (fn() { })();

解析之后，我們希望將所有fn實例替換為function。要創(chuàng)建這個別名，我們需要修改文件后面的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"         } // ...

你可能會問自己“我為什么要這么做?!”嗯，您可能不會這樣做——修改源代碼庫以供自己使用是一個維護惡夢，并且在源代碼....中使用流氓關(guān)鍵字也是維護的噩夢。

綜上所述，如果您想嘗試添加自己的關(guān)鍵字別名，那么修改Babel源是最好的選擇。我希望有一種方法可以編寫一個擴展來實現(xiàn)這一點。