当我们导入模块时,您可以默认将其引入:
您也可以像这样解构它:
第一个默认简介称为默认导入,第二个解构引入命名为导入。
我不知道每个人都习惯了。
如果有需要,让您将所有默认导入转换为命名导入,您会做什么?
也许您会说这不是要找到所有引入变量的地方,将其修改为直接调用方法,然后这些方法名称是通过解构的导入语句中写入的。
但是,如果要更改100多个此类文件怎么办?(触发Treeshking需要以这种方式更改)
目前,您可以考虑使用Babel插头。它非常适合自动修改此规则和大量代码。
通过此示例,让我们感受到通用插件的力量。
因为还有更多的代码,所以每个人都不耐心,或者让我们首先看一下效果:
输入代码是:
我们介绍通用插件,阅读输入代码并进行转换:
打印如下:
我们已经完成了默认导入到命名导入的自动转换。
一些学生可能会担心这个问题,让我们测试:
可以看出,插头已经解决了问题。
导入语句中的一部分称为指定符。我们可以通过astexplorer.net查看其AST,以视觉可视化其AST。
例如,这样的导入语句:
相应的AST就是这样:
也就是说,默认导入是,并解构导入
该语句具有本地和导入的属性,代表代表引入的名称和名称:
然后,我们的目的是明确的,也就是说,用于转换为设置导入属性的属性方法。那些需要重命名本地属性的人。
您如何知道使用了哪些属性方法?如何分析变量的参考?
Babel提供了用于实际领域分析的范围API,可以在行动范围内获得声明,以及所有引用此陈述的地方。
例如,您可以在此处使用“范围”方法来获取变量的语句:
然后使用binding.enferences获取所有引用此语句的地方,即path.join和path.sep。
之后,您可以将这两个引用更改为直接方法,然后将导入语句修改为解构。
让我们总结一下这些步骤:
原理可能通过,让我们编写代码
Babel插件是函数返回对象的形式。返回对象主要是指定通过访问者属性指定的AST处理。
我们采用一个通用插件的骨架:
我们在这里必须处理的是导入声明。
包装方法的作用是将断言方法扩展到API。断言的作用是,如果此插头在Babel6上工作会报告一个错误,则说明此插件仅在Babel7中使用。,这可以避免报告错误。
路径用于操作一些AST API,还保留节点之间的连接,例如父,兄弟姐妹等。
接下来输入主题:
我们必须先取出指定器部分,然后找出:
然后根据行动范围中的声明找到所有地方查找所有参考的地方:
然后修改引用导入的每个位置,直接更改函数,然后收集函数名称。请注意,如果范围的范围中存在变量,则会生成新的唯一ID。
有很多逻辑,因此要专注于它。
我们记录了引用变量的每个位置的参考方法,例如path.join,path.sep,引用加入和sep方法。
然后将路径替换为加入,然后将path.sep替换为sep。
如果范围中有加入或SEP的说明,则需要生成新ID并记录新ID是什么。
收集所有方法名称后,您可以修改导入语句:
没有通用插件的基础,可能会有点头晕。知道他在做什么都没关系。我们接下来会尝试效果。
我们将默认导入到名称导入的自动转换。实际上,也是如此。这不是对范围的绑定和参考的分析,然后修改AST?有兴趣的学生可以依次尝试写作。
插件的整个代码如下:
我们必须执行默认导入到名称的默认导入,即转弯,通过范围API分析绑定和引用,找到所有参考,将其替换为直接调用函数的形式,然后修改导入的AST陈述。
Babel插头特别适合这种常规和大转换需求,在某些情况下具有强大的功能。