加入收藏 | 设为首页 | 会员中心 | 我要投稿 盐城站长网 (https://www.0515zz.cn/)- 运维、云管理、管理运维、智能数字人、AI硬件!
当前位置: 首页 > 站长资讯 > 外闻 > 正文

程序员表示:我们太像了!

发布时间:2021-02-12 12:45:41 所属栏目:外闻 来源:互联网
导读:插件的执行思路: 第一步,执行该插件,获取到包含visitor对象; 第二步,ATS遍历节点,检测nodePath的type === ArrowFunctionExpression,寻找到vistor对象的中key为 ArrowFunctionExpression的函数; 第三步,将nodePath传入该函数进行调用(AST在这步被修

插件的执行思路:

  •  第一步,执行该插件,获取到包含visitor对象;
  •  第二步,ATS遍历节点,检测nodePath的type === 'ArrowFunctionExpression',寻找到vistor对象的中key为 ArrowFunctionExpression的函数;
  •  第三步,将nodePath传入该函数进行调用(AST在这步被修改);

单个插件的执行思路很明确了,那么在ATS遍历过程,怎么做到多个插件一起工作呢?

Babel在转换源码过程中,插件化架构的工作流程是这样的:

  •  第一步:通过解析babel的配置文件(或者命令行--plugins参数),获取Babel配置的所有插件的描述;
  •  第二步,将插件的require进内存,获得插件函数,并执行插件函数,获取到多个包含vistor字段对象;(详细逻辑:@babel/core/src/config/full.js [4])
  •  第三步,将多个包含vistor字段对象整合成一个大的visitor源码展示(详细逻辑:@babel/core/src/transformation/index.js [5]):

插件是一个函数,返回值是一个包含visitor的对象。插件定义的部分概念说明:

  •  name:插件名
  •  pluginAPI: 插件运行时传入的API
  •  visitor: 是一个对象,对象的key是AST的每节点的类型,对象的值是一个函数,AST转换的过程便在这里发生的。
  •  nodePath:是一个AST的节点的实例对象,详细可以参考:@babel/parser/src/parser/node.js [1],其中, type字段 : 该节点的类型,常见类型:VariableDeclaration(变量声明)、VariableDeclarator(变量声明表达式)、ArrowFunctionExpression(箭头函数表达式)等等,详细可以参考@babel/types [2]。

(笔者认为pluginAPI还应包括nodePath,因为,每个节点实例除了语法和词法描述,还包含需求语法间的转换方法)

插件示例
 

从三要素来总结:

  •  pluginCore:通过原型链赋值来扩展不同的插件,再获得jQuery实例后可以被调用。
  •  pluginAPI:jQuery包的核心接口,(jQuery依靠其优异的Api取胜)
  •  plugin:无限制,可以是JavaScript的类型,一般是实现具体功能的模块,比如,日期选择器等。

2.2 Babel的插件化架构

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。在代码转换的过程中会涉及许多特性和语法的转换,而且ECMAScript的提案总是不断地更新。如何组织大量(不断增加)的转换规则呢?我们来看看 Babel的工作原理。

Babel转换源码,分为三个步骤:

  •     解析(parse):进行词法分析(Lexical Analysis)和语法分析(Syntactic Analysis)以生成抽象语法树(AST);
  •     转换 (transform):遍历AST中每个节点并进行相应的转换操作,该过程通过使用不同的插件来实现各种特性和语法的转换;
  •     生成 (generate):根据AST生成目标代码。


(编辑:盐城站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读