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