当前位置: 首页 > 网络应用技术

导入方法可以随意转向彼此,并感受到Babel插件的力量

时间:2023-03-08 15:23:59 网络应用技术

  当我们导入模块时,您可以默认将其引入:

  您也可以像这样解构它:

  第一个默认简介称为默认导入,第二个解构引入命名为导入。

  我不知道每个人都习惯了。

  如果有需要,让您将所有默认导入转换为命名导入,您会做什么?

  也许您会说这不是要找到所有引入变量的地方,将其修改为直接调用方法,然后这些方法名称是通过解构的导入语句中写入的。

  但是,如果要更改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插头特别适合这种常规和大转换需求,在某些情况下具有强大的功能。