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

    技术2022-07-10  119

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

    如今,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资源!

    .x-secondary-small { display: none; } @media only screen and (max-width: 600px) { .x-secondary { max-height: none; } .x-secondary-large { display: none; } .x-secondary-small { display: block; } }

    翻译自: https://davidwalsh.name/add-babel-keyword

    相关资源:jdk-8u281-windows-x64.exe
    Processed: 0.012, SQL: 9