本文介绍了JavaScript抽象语法树。 有一定的参考价值，有需要的朋友可以参考，希望对大家有帮助。
前言
虽然babel现在是大多数项目的必需项目，但其工作方式无法避免生成js分析的过程。 babel有一个引擎babylon，它在早期冻结了项目acron。 在知道这个之前，让我们先看看这个引擎在分析什么样的东西。 不仅是babel，webpack等也在javascript parser中将代码转换为抽象语法树。 该树定义了代码本身，可以通过操作该树准确定位到赋值语句、声明语句和运算语句
什么是抽象语法树
让我们来看一个简单的例子。 var a=1；
var b=a 1；
我们通过这个网站，他是esprima引擎的网站，很好用。 根据流程图，如下所示。
他的json对象格式如下。 {
'类型' : '程序'，
' body': [
{
' type': 'VariableDeclaration '，
' declarations': [
{
'类型' : '可变解码器'，
' id': {
'类型' : '标识符'，
' name': 'a '
(，
' init': {
'类型' : ' literal '，
' value': 1，
' raw': '1'
}
}
]、
' kind': 'var '
(，
{
' type': 'VariableDeclaration '，
' declarations': [
{
'类型' : '可变解码器'，
' id': {
'类型' : '标识符'，
' name': 'b '
(，
' init': {
' type': 'BinaryExpression '，
'操作者' : '，
' left': {
'类型' : '标识符'，
' name': 'a '
(，
' right': {
'类型' : ' literal '，
' value': 1，
' raw': '1'
}
}
}
]、
' kind': 'var '
}
]、
' sourceType': 'script '
}
很多发动机
chrome有v8，firefix有spidermonkey。 另外，常用的发动机有esprima
亚伦
追踪器
UglifyJS2
短整型
以下是几个发动机的速度比较，以及发动机们使用不同框架的加载速度。
我个人认为封装越完美，其实解析时间越长，引擎之间也有acron这个速度越好，babel引擎的前身应该是fork这个项目。
AST的三板斧通过esprima生成AST
通过estraverse遍历和更新AST
在escodegen中将AST重新生成为源代码
举个简单的例子：
创建新的test项目目录
在test工序中安装esprima、estraverse、escodegen的npm模块npmiesprimaestraverseescodegen---- save
3 .在目录下创建新的test.js文件，并加载以下代码： constesprima=require(esprima )；
let代码=' const a=1'；
constast=es prima.parse script (代码)；
控制台. log (ast；
显示输出结果。 脚本{
类型： ' program '，
body:
[可变描述{
类型： ' variable declaration '，
描述： [阵列]，
kind: 'const' } ]在、
sourceType: 'script' }
4 .再将以下代码加载到test文件中： constestraverse=require (es traverse )；
estraverse.traverse(ast，{
enter :功能(节点) {
node.kind='var '；
}
)；
控制台. log (ast；
输出结果： Script {
类型： ' program '，
body:
[可变描述{
类型： ' variable declaration '，
描述： [阵列]，
kind: 'var' } ]，
sourceType: 'script' }
5 .最后，在test文件中添加以下代码： 上下文编码=请求(es编码)；
consttransformcode=es codegen.generate (ast ) ) ) ) )。
控制台. log (transform code；
输出结果： var a=1； 用这把三板斧，我们将const a=1转换为var a=1
是否有babel的感觉0.0
推荐网站
总结
抽象树在前端使用较多，但现在流行的工具无论是webpack还是babel都经过它的三板斧流程。 这里只是粗略地介绍一下，其中会出现抽象树的语法。 有兴趣的人也可以看看esprima的源代码。 为什么是esprima，是因为esprima的资料更多。 因为acron很轻。
本文转载于https://segment fault.com/a/119000012943992
更多web前端开发知识，请访问HTML中文网！