JavaScript 语法树与代码转化实践 归纳于笔者的现代 JavaScript 开辟:语法基本与实践技能系列文┞仿中。本文引用的参考材料声明于 JavaScript 进修与实践材料索引中,特别须要声明是部分代码片引用自 Babel Handbook 开源手册;也迎接存眷前端每周清单系列获得一手资讯。
JavaScript 语法树与代码转化

浏览器的兼容性问题一向是前端项目开辟中的可贵之一,往往客户端浏览器的进级无法与语法特点的迭代保持一致;是以我们须要应用大年夜量的垫片(Polyfill),以包管现代语法编写而成的 JavaScript 顺利运行在临盆情况下的浏览器中,大年夜而在可用性与代码的可保护性之间杀青较好的均衡。而以 Babel 为代表的语法转化对象可以或许帮我们主动将 ES6 等现代 JavaScript 代码转化为可以运行在旧版本浏览器中的 ES5 或其他一致的实现;实际上,Babel 不仅仅是语法解析器,其更是拥有丰富插件的平台,稍加扩大即可被应用在前端监控埋点、缺点日记收集等场景中。笔者也应用 Babel 以及 Babylon 为 swagger-decorator 实现了 flowToDecorator 函数,其可以或许大年夜 Flow 文件中主动提掏出类型信息并为类属性添加合适的注解。
Babel
自 Babel 6 之后,核心的 babel-core 仅裸露了部分核心接口,并应用 Babylon 进行语法树构建,即上图中的 Parse 与 Generate 步调;实际的转化步调则是由设备的插件(Plugin)完成。而所谓的 Preset 则是一系列插件的合集,譬如 babel-preset-es2015 的源代码中就定义了一系列的插件:
- return {
- plugins: [
- [transformES2015TemplateLiterals, { loose, spec }],
- transformES2015Literals,
- transformES2015FunctionName,
- [transformES2015ArrowFunctions, { spec }],
- transformES2015BlockScopedFunctions,
- [transformES2015Classes, optsLoose],
- transformES2015ObjectSuper,
- ...
- modules === "commonjs" && [transformES2015ModulesCommonJS, optsLoose],
- modules === "systemjs" && [transformES2015ModulesSystemJS, optsLoose],
- modules === "amd" && [transformES2015ModulesAMD, optsLoose],
- modules === "umd" && [transformES2015ModulesUMD, optsLoose],
- [transformRegenerator, { async: false, asyncGenerators: false }]
- ].filter(Boolean) // filter out falsy values
- };
Babel 可以或许将输入的 JavaScript 代码根据不合的设备将代码进行适本地转化,其重要步调分为解析(Parse)、转化(Transform)与生成(Generate):
在解析步调中,Babel 分别应用词法分析(Lexical Analysis)与语法分析(Syntactic Analysis)来将输入的代码转化为抽象语法树;个中词法分析步调会将代码转化为令牌流,而语法分析步调则是将令牌流转化为说话内置的 AST 表示。
自定义插件
最后的代码生成则是将上一步中经由转化的抽象语法树从新生成为代码,并且同时创建 SourceMap;代码生成相较于前两步会简单很多,其核心思惟在于深度优先遍历抽象语法树,然后生查对应的代码字符串。
抽象语法树
感化域
- 断定某个局部变量是否被绑定:
抽象语法树(Abstract Syntax Tree, AST)的感化在于紧紧抓住法度榜样的脉络,大年夜而便利编译过程的后续环节(如代码生成)对法度榜样进行解读。AST 就是开辟者为说话量身定制的一套模型,根本上说话中的每种构造都与一种 AST 对象相对应。上文说起的解析步调中的词法分析步调会将代码转化为所谓的令牌流,譬如对于代码 n * n,其会被转化为如下数组:
- [
推荐阅读
2009年6月,我省开端量刑规范化改革,是全国第二批试点省份。据介绍,海南最新版的量刑细则涵盖了23个常见着绫躯和罚金刑、缓刑实用,所涉的刑事犯法案件占到我省刑事案件的95%以上。此次>>>详细阅读
本文标题:JavaScript语法树与代码转化实践
地址:http://www.17bianji.com/lsqh/36429.html
1/2 1

网友点评
精彩导读
科技快报
品牌展示