关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可
~技术问答题~
返 回

No.833 ES6 代码转成 ES5 代码的实现思路是什么

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

参考1

题目说的是 ES6,所以不考虑 .jsx、.ts 这类 js 拓展语言。 ES6 转 ES5 目前行业标配是用 Babel,转换的大致流程如下:

解析:解析代码字符串,生成 AST; 转换:按一定的规则转换、修改 AST; 生成:将修改后的 AST 转换成普通代码。 如果不用工具,纯人工的话,就是使用或自己写各种 polyfill 了。

参考2

说到 ES6 代码转成 ES5 代码,我们肯定会想到 Babel。所以,我们可以参考 Babel 的实现方式。

那么 Babel 是如何把 ES6 转成 ES5 呢,其大致分为三步:

将代码字符串解析成抽象语法树,即所谓的 AST 对 AST 进行处理,在这个阶段可以对 ES6 代码进行相应转换,即转成 ES5 代码 根据处理后的 AST 再生成代码字符串 基于此,其实我们自己就可以实现一个简单的“编译器”,用于把 ES6 代码转成 ES5。

比如,可以使用 @babel/parser 的 parse 方法,将代码字符串解析成 AST;使用 @babel/core 的 transformFromAstSync 方法,对 AST 进行处理,将其转成 ES5 并生成相应的代码字符串;过程中,可能还需要使用 @babel/traverse 来获取依赖文件等。

如果有误,希望可以帮忙指出来,多谢。


原文在这里 点这里

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会