You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
FunctionDeclaration(path){path.insertBefore(t.expressionStatement(t.stringLiteral("Because I'm easy come, easy go.")));path.insertAfter(t.expressionStatement(t.stringLiteral("A little high, little low.")));}
删除一个节点使用 remove 方法即可:
path.move();
替换节点使用 replaceWith 方法,依旧使用别人的例子:
BinaryExpression(path){path.parentPath.replaceWith(t.expressionStatement(t.stringLiteral("Anyway the wind blows, doesn't really matter to me, to me.")));}
编写babel插件时最常使用的是库
@babel/core
、@babel/types
babel插件需要返回一个function,function内返回visitor。
visitor里我们可以编写针对各类 AST type 的处理方式,从而达到修改AST的效果,关于 babel 转换得到的各类 AST 究竟有哪些类型,可以在 这里 看到。
visitor 这个对象的key就是ast的类型,值就是处理ast的函数。
例如,遇到全等号的时候我们将全等号的两边的值换掉,可以这样写。
babel插件通过options来配置使用,如:
这里的options参数会传给我们visitor的每个处理函数的第二个参数state的opts
通过这个参数我们就可以更好地配置我们的 babel 插件。
插件基本的编写已经明朗,接下来看看插件最核心的功能,就是修改 AST,也就是对AST进行增删改。
在增删改前我们首先需要保证我们是真正处理了我们想要处理的代码,在AST中也就是各个node节点,我们可以通过
@babel/types
来判断,同时通过node节点属性来辅助我们判断这样的检查功能上等价于
接下来就是对于AST的增删改了。
增加兄弟节点可以使用
insertBefore
和insertAfter
方法,使用babel插件手册的例子:删除一个节点使用
remove
方法即可:替换节点使用
replaceWith
方法,依旧使用别人的例子:有时候需要对父级节点做处理,可以通过
path.parentPath
来访问父级节点同时还有其他方法
path.findParent
、path.find
、path.getFunctionParent
、path.getStatementParent
等。有时候我们需要判断或者获取兄弟节点同样也行,比如:
path.inList 判断是否有兄弟节点
path.getSibling(index) 获取指定的节点
实践以下,下面可以看一个大佬写的插件:
�我自己动手实践一下,实现了一个去掉调试代码的�babel插件, 地址在这里babel-plugin-no-debugging
refs:
https://github.com/jamiebuilds/babel-handbook
面试官: 你了解过Babel吗?写过Babel插件吗? 答: 没有。卒
理解 Babel 插件
The text was updated successfully, but these errors were encountered: