使用Acorn来解析JavaScript-阿里云开发者社区

开发者社区> 行者武松> 正文

使用Acorn来解析JavaScript

简介:
+关注继续查看


Talk

因为最近工作上有需要使用解析 JavaScript 的代码,大部分情况使用正则表达式匹配就可以处理,但是一旦依赖于代码上下文的内容时,正则或者简单的字符解析就很力不从心了,这个时候需要一个语言解析器来获取整一个 AST(abstract syntax tree)。

然后我找到了多个使用 JavaScript 编写的 JavaScript 解析器:

  • Esprima
  • Acorn
  • UglifyJS 2
  • Shift

从提交记录来看,维护情况都蛮好的,ES 各种发展的特性都跟得上,我分别都简单了解了一下,聊聊他们的一些情况。

<!--more-->

Esprima 是很经典的一个解析器,Acorn 在它之后诞生,都是几年前的事情了。按照 Acorn 作者的说法,当时造这个轮子更多只是好玩,速度可以和 Esprima 媲美,但是实现代码更少。其中比较关键的点是这两个解析器出来的 AST 结果(对,只是 AST,tokens 不一样)都是符合 The Estree Spec 规范(这是 Mozilla 的工程师给出的 SpiderMonkey 引擎输出的 JavaScript AST 的规范文档,也可以参考:SpiderMonkey in MDN)的,也就是得到的结果在很大部分上是兼容的。

现在很出名的 Webpack 解析代码时用的也是 Acorn。

至于 Uglify,很出名的一个 JavaScript 代码压缩器,其实它自带了一个代码解析器,也可以输出 AST,但是它的功能更多还是用于压缩代码,如果拿来解析代码感觉不够纯粹。

Shift 这个没做多少了解,只知道他定义了自己的一套 AST 规范。

Esprima 官网上有一个性能测试,我在 chrome 上跑的结果如下:

<img src="http://ww1.sinaimg.cn/large/0... alt="性能测试" style="width:100%;">

可见,Acorn 的性能很不错,而且还有一个 Estree 的规范呢(规范很重要,我个人觉得遵循通用的规范是代码复用的重要基础),所以我就直接选用 Acorn 来做代码解析了。

图中做性能对比的还有 Google 的 Traceur,它更多是一个 ES6 to ES5 的 compiler,于我们想要找的解析器定位不符。

下面进入正题,如何使用 Acorn 来解析 JavaScript。

API

解析器的 API 都是很简单的:


  1. const ast = acorn.parse(code, options) 

Acorn 的配置项蛮多的,里边还包括了一些事件可以设置回调函数。我们挑几个比较重要的讲下:

  • ecmaVersion

字面意义,很好理解,就是设置你要解析的 JavaScript 的 ECMA 版本。默认是 ES7。

  • sourceType

这个配置项有两个值:module 和 script,默认是 script。

主要是严格模式和 import/export 的区别。ES6 中的模块是严格模式,也就是你无须添加 use strict。我们通常浏览器中使用的 script 是没有 import/export 语法的。

所以,选择了 script 则出现 import/export 会报错,可以使用严格模式声明,选择了 module,则不用严格模式声明,可以使用import/export 语法。

  • locations

默认值是 false,设置为 true 之后会在 AST 的节点中携带多一个 loc 对象来表示当前的开始和结束的行数和列数。

  • onComment

传入一个回调函数,每当解析到代码中的注释时会触发,可以获取当年注释内容,参数列表是:[block, text, start, end]。

block 表示是否是块注释,text 是注释内容,start 和 end 是注释开始和结束的位置。

上边提及的 Espree 需要 Esprima 的 attachComment 的配置项,设置为 true 后,Esprima 会在代码解析结果的节点中携带注释相关信息(trailingComments 和 leadingComments)。Espree 则是利用 Acorn 的 onComment 配置来实现这个 Esprima 特性的兼容。

解析器通常还会有一个获取词法分析结果的接口:


  1. const tokens = [...acorn.tokenizer(code, options)] 

tokenizer 方法的第二个参数也能够配置 locations。

词法结果 token 和 Esprima 的结果数据结构上有一定的区别(Espree 又是做了这一层的兼容),有兴趣了解的可以看下 Esprima 的解析结果:http://esprima.org/demo/parse...

至于 Acorn 解析的 AST 和 token 的内容我们接下来详述。

Token

我找了半天,没找到关于 token 数据结构的详细介绍,只能自己动手来看一下了。

我用来测试解析的代码是:


  1. import "hello.js" 
  2.  
  3. var a = 2; 
  4.  
  5. // test 
  6. function name() { console.log(arguments); }  

解析出来的 token 数组是一个个类似这样的对象:


  1. Token { 
  2.     type: 
  3.      TokenType { 
  4.        label: 'import'
  5.        keyword: 'import'
  6.        beforeExpr: false
  7.        startsExpr: false
  8.        isLoop: false
  9.        isAssign: false
  10.        prefix: false
  11.        postfix: false
  12.        binop: null
  13.        updateContext: null }, 
  14.     value: 'import'
  15.     start: 5, 
  16.     end: 11 },  

看上去其实很好理解对不对,在 type 对应的对象中,label 表示当前标识的一个类型,keyword 就是关键词,像例子中的import,或者 function 之类的。

value 则是当前标识的值,start/end 分别是开始和结束的位置。

通常我们需要关注的就是 label/keyword/value 这些了。其他的详细可以参考源码:tokentype.js。

The Estree Spec

这一部分是重头戏,因为实际上我需要的还是解析出来的 AST。最原滋原味的内容来自于:The Estree Spec,我只是阅读了之后的搬运工。

提供了标准文档的好处是,很多东西有迹可循,这里还有一个工具,用于把满足 Estree 标准的 AST 转换为 ESMAScript 代码:escodegen。

好吧,回到正题,我们先来看一下 ES5 的部分,可以在 Esprima: Parser 这个页面测试各种代码的解析结果。

符合这个规范的解析出来的 AST 节点用 Node 对象来标识,Node 对象应该符合这样的接口:


  1. interface Node { 
  2.     type: string; 
  3.     loc: SourceLocation | null
  4. }  

type 字段表示不同的节点类型,下边会再讲一下各个类型的情况,分别对应了 JavaScript 中的什么语法。

loc 字段表示源码的位置信息,如果没有相关信息的话为 null,否则是一个对象,包含了开始和结束的位置。接口如下:


  1. interface SourceLocation { 
  2.     source: string | null
  3.     start: Position; 
  4.     end: Position; 
  5. }  

这里的 Position 对象包含了行和列的信息,行从 1 开始,列从 0 开始:


  1. interface Position { 
  2.     line: number; // >= 1 
  3.     column: number; // >= 0 
  4. }  

好了,基础部分就是这样,接下来看各种类型的节点,顺带温习一下 JavaScript 语法的一些东西吧。对于这里每一部分的内容,会简单谈一下,但不会展开(内容不少),对 JavaScript 了解的人很容易就明白的。

我觉得看完就像把 JavaScript 的基础语法整理了一遍。

Identifier

标识符,我觉得应该是这么叫的,就是我们写 JS 时自定义的名称,如变量名,函数名,属性名,都归为标识符。相应的接口是这样的:


  1. interface Identifier <: Expression, Pattern { 
  2.     type: "Identifier"
  3.     name: string; 
  4. }  

一个标识符可能是一个表达式,或者是解构的模式(ES6 中的解构语法)。我们等会会看到 Expression 和 Pattern 相关的内容的。

Literal

字面量,这里不是指 [] 或者 {} 这些,而是本身语义就代表了一个值的字面量,如 1,“hello”, true 这些,还有正则表达式(有一个扩展的 Node 来表示正则表达式),如 /d?/。我们看一下文档的定义:


  1. interface Literal <: Expression { 
  2.     type: "Literal"
  3.     value: string | boolean | null | number | RegExp; 
  4. }  

value 这里即对应了字面量的值,我们可以看出字面量值的类型,字符串,布尔,数值,null 和正则。

RegExpLiteral

这个针对正则字面量的,为了更好地来解析正则表达式的内容,添加多一个 regex 字段,里边会包括正则本身,以及正则的flags。


  1. interface RegExpLiteral <: Literal { 
  2.   regex: { 
  3.     pattern: string; 
  4.     flags: string; 
  5.   }; 
  6. }  

Programs

一般这个是作为跟节点的,即代表了一棵完整的程序代码树。


  1. interface Program <: Node { 
  2.     type: "Program"
  3.     body: [ Statement ]; 
  4. }  

body 属性是一个数组,包含了多个 Statement(即语句)节点。

Functions

函数声明或者函数表达式节点。


  1. interface Function <: Node { 
  2.     id: Identifier | null
  3.     params: [ Pattern ]; 
  4.     body: BlockStatement; 
  5. }  

id 是函数名,params 属性是一个数组,表示函数的参数。body 是一个块语句。

有一个值得留意的点是,你在测试过程中,是不会找到 type: "Function" 的节点的,但是你可以找到 type: "FunctionDeclaration" 和 type: "FunctionExpression",因为函数要么以声明语句出现,要么以函数表达式出现,都是节点类型的组合类型,后边会再提及 FunctionDeclaration 和 FunctionExpression 的相关内容。

这让人感觉这个文档规划得蛮细致的,函数名,参数和函数块是属于函数部分的内容,而声明或者表达式则有它自己需要的东西。

Statement

语句节点没什么特别的,它只是一个节点,一种区分,但是语句有很多种,下边会详述。


  1. interface Statement <: Node { } 

ExpressionStatement

表达式语句节点,a = a + 1 或者 a++ 里边会有一个 expression 属性指向一个表达式节点对象(后边会提及表达式)。


  1. interface ExpressionStatement <: Statement { 
  2.     type: "ExpressionStatement"
  3.     expression: Expression; 
  4. }  

BlockStatement

块语句节点,举个例子:if (...) { // 这里是块语句的内容 },块里边可以包含多个其他的语句,所以有一个 body 属性,是一个数组,表示了块里边的多个语句。


  1. interface BlockStatement <: Statement { 
  2.     type: "BlockStatement"
  3.     body: [ Statement ]; 
  4. }  

EmptyStatement

一个空的语句节点,没有执行任何有用的代码,例如一个单独的分号 ;


  1. interface EmptyStatement  <: Statement { 
  2.     type: "EmptyStatement "
  3. }  

DebuggerStatement

debugger,就是表示这个,没有其他了。


  1. interface DebuggerStatement <: Statement { 
  2.     type: "DebuggerStatement"
  3. }  

WithStatement

with 语句节点,里边有两个特别的属性,object 表示 with 要使用的那个对象(可以是一个表达式),body 则是对应 with 后边要执行的语句,一般会是一个块语句。


  1. interface WithStatement <: Statement { 
  2.     type: "WithStatement"
  3.     object: Expression; 
  4.     body: Statement; 
  5. }  

下边是控制流的语句:

ReturnStatement

返回语句节点,argument 属性是一个表达式,代表返回的内容。


  1. interface ReturnStatement <: Statement { 
  2.     type: "ReturnStatement"
  3.     argument: Expression | null
  4. }  

LabeledStatement

label 语句,平时可能会比较少接触到,举个例子:


  1. loop: for(let i = 0; i < len; i++) { 
  2.     // ... 
  3.     for (let j = 0; j < min; j++) { 
  4.         // ... 
  5.         break loop; 
  6.     } 
  7. }  

这里的 loop 就是一个 label 了,我们可以在循环嵌套中使用 break loop 来指定跳出哪个循环。所以这里的 label 语句指的就是loop: ... 这个。

一个 label 语句节点会有两个属性,一个 label 属性表示 label 的名称,另外一个 body 属性指向对应的语句,通常是一个循环语句或者 switch 语句。


  1. interface LabeledStatement <: Statement { 
  2.     type: "LabeledStatement"
  3.     label: Identifier; 
  4.     body: Statement; 
  5. }  

BreakStatement

break 语句节点,会有一个 label 属性表示需要的 label 名称,当不需要 label 的时候(通常都不需要),便是 null。


  1. interface BreakStatement <: Statement { 
  2.     type: "BreakStatement"
  3.     label: Identifier | null
  4. }  

ContinueStatement

continue 语句节点,和 break 类似。


  1. interface ContinueStatement <: Statement { 
  2.     type: "ContinueStatement"
  3.     label: Identifier | null
  4. }  

下边是条件语句:

IfStatement

if 语句节点,很常见,会带有三个属性,test 属性表示 if (...) 括号中的表达式。

consequent 属性是表示条件为 true 时的执行语句,通常会是一个块语句。

alternate 属性则是用来表示 else 后跟随的语句节点,通常也会是块语句,但也可以又是一个 if 语句节点,即类似这样的结构:

if (a) { //... } else if (b) { // ... }。

alternate 当然也可以为 null。


  1. interface IfStatement <: Statement { 
  2.     type: "IfStatement"
  3.     test: Expression; 
  4.     consequent: Statement; 
  5.     alternate: Statement | null
  6. }  

SwitchStatement

switch 语句节点,有两个属性,discriminant 属性表示 switch 语句后紧随的表达式,通常会是一个变量,cases 属性是一个case 节点的数组,用来表示各个 case 语句。


  1. interface SwitchStatement <: Statement { 
  2.     type: "SwitchStatement"
  3.     discriminant: Expression; 
  4.     cases: [ SwitchCase ]; 
  5. }  

SwitchCase

switch 的 case 节点。test 属性代表这个 case 的判断表达式,consequent 则是这个 case 的执行语句。

当 test 属性是 null 时,则是表示 default 这个 case 节点。


  1. interface SwitchCase <: Node { 
  2.     type: "SwitchCase"
  3.     test: Expression | null
  4.     consequent: [ Statement ]; 
  5. }  

下边是异常相关的语句:

ThrowStatement

throw 语句节点,argument 属性用以表示 throw 后边紧跟的表达式。


  1. interface ThrowStatement <: Statement { 
  2.     type: "ThrowStatement"
  3.     argument: Expression; 
  4. }  

TryStatement

try 语句节点,block 属性表示 try 的执行语句,通常是一个块语句。

hanlder 属性是指 catch 节点,finalizer 是指 finally 语句节点,当 hanlder 为 null 时,finalizer 必须是一个块语句节点。


  1. interface TryStatement <: Statement { 
  2.     type: "TryStatement"
  3.     block: BlockStatement; 
  4.     handler: CatchClause | null
  5.     finalizer: BlockStatement | null
  6. }  

CatchClause

catch 节点,param 用以表示 catch 后的参数,body 则表示 catch 后的执行语句,通常是一个块语句。


  1. interface CatchClause <: Node { 
  2.     type: "CatchClause"
  3.     param: Pattern; 
  4.     body: BlockStatement; 
  5. }  

下边是循环语句:

WhileStatement

while 语句节点,test 表示括号中的表达式,body 是表示要循环执行的语句。


  1. interface WhileStatement <: Statement { 
  2.     type: "WhileStatement"
  3.     test: Expression; 
  4.     body: Statement; 
  5. }  

DoWhileStatement

do/while 语句节点,和 while 语句类似。


  1. interface DoWhileStatement <: Statement { 
  2.     type: "DoWhileStatement"
  3.     body: Statement; 
  4.     test: Expression; 
  5. }  

ForStatement

for 循环语句节点,属性 init/test/update 分别表示了 for 语句括号中的三个表达式,初始化值,循环判断条件,每次循环执行的变量更新语句(init 可以是变量声明或者表达式)。这三个属性都可以为 null,即 for(;;){}。

body 属性用以表示要循环执行的语句。


  1. interface ForStatement <: Statement { 
  2.     type: "ForStatement"
  3.     init: VariableDeclaration | Expression | null
  4.     test: Expression | null
  5.     update: Expression | null
  6.     body: Statement; 
  7. }  

ForInStatement

for/in 语句节点,left 和 right 属性分别表示在 in 关键词左右的语句(左侧可以是一个变量声明或者表达式)。body 依旧是表示要循环执行的语句。


  1. interface ForInStatement <: Statement { 
  2.     type: "ForInStatement"
  3.     left: VariableDeclaration |  Pattern; 
  4.     right: Expression; 
  5.     body: Statement; 
  6. }  

Declarations

声明语句节点,同样也是语句,只是一个类型的细化。下边会介绍各种声明语句类型。


  1. interface Declaration <: Statement { } 

FunctionDeclaration

函数声明,和之前提到的 Function 不同的是,id 不能为 null。


  1. interface FunctionDeclaration <: Function, Declaration { 
  2.     type: "FunctionDeclaration"
  3.     id: Identifier; 
  4. }  

VariableDeclaration

变量声明,kind 属性表示是什么类型的声明,因为 ES6 引入了 const/let。

declarations 表示声明的多个描述,因为我们可以这样:let a = 1, b = 2;。


  1. interface VariableDeclaration <: Declaration { 
  2.     type: "VariableDeclaration"
  3.     declarations: [ VariableDeclarator ]; 
  4.     kind: "var"
  5. }  

VariableDeclarator

变量声明的描述,id 表示变量名称节点,init 表示初始值的表达式,可以为 null。


  1. interface VariableDeclarator <: Node { 
  2.     type: "VariableDeclarator"
  3.     id: Pattern; 
  4.     init: Expression | null
  5. }  

Expressions

表达式节点。


  1. interface Expression <: Node { } 

ThisExpression

表示 this。


  1. interface ThisExpression <: Expression { 
  2.     type: "ThisExpression"
  3. }  

ArrayExpression

数组表达式节点,elements 属性是一个数组,表示数组的多个元素,每一个元素都是一个表达式节点。


  1. interface ArrayExpression <: Expression { 
  2.     type: "ArrayExpression"
  3.     elements: [ Expression | null ]; 
  4. }  

ObjectExpression

对象表达式节点,property 属性是一个数组,表示对象的每一个键值对,每一个元素都是一个属性节点。


  1. interface ObjectExpression <: Expression { 
  2.     type: "ObjectExpression"
  3.     properties: [ Property ]; 
  4. }  

Property

对象表达式中的属性节点。key 表示键,value 表示值,由于 ES5 语法中有 get/set 的存在,所以有一个 kind 属性,用来表示是普通的初始化,或者是 get/set。


  1. interface Property <: Node { 
  2.     type: "Property"
  3.     key: Literal | Identifier; 
  4.     value: Expression; 
  5.     kind: "init" | "get" | "set"
  6. }  

FunctionExpression

函数表达式节点。


  1. interface FunctionExpression <: Function, Expression { 
  2.     type: "FunctionExpression"
  3. }  

下边是一元运算符相关的表达式部分:

UnaryExpression

一元运算表达式节点(++/-- 是 update 运算符,不在这个范畴内),operator 表示运算符,prefix 表示是否为前缀运算符。argument 是要执行运算的表达式。


  1. interface UnaryExpression <: Expression { 
  2.     type: "UnaryExpression"
  3.     operator: UnaryOperator; 
  4.     prefix: boolean; 
  5.     argument: Expression; 
  6. }  

UnaryOperator

一元运算符,枚举类型,所有值如下:


  1. enum UnaryOperator { 
  2.     "-" | "+" | "!" | "~" | "typeof" | "void" | "delete" 
  3. }  

UpdateExpression

update 运算表达式节点,即 ++/--,和一元运算符类似,只是 operator 指向的节点对象类型不同,这里是 update 运算符。


  1. interface UpdateExpression <: Expression { 
  2.     type: "UpdateExpression"
  3.     operator: UpdateOperator; 
  4.     argument: Expression; 
  5.     prefix: boolean; 
  6. }  

UpdateOperator

update 运算符,值为 ++ 或 --,配合 update 表达式节点的 prefix 属性来表示前后。


  1. enum UpdateOperator { 
  2.   "++" | "--" 
  3. }  

下边是二元运算符相关的表达式部分:

BinaryExpression

二元运算表达式节点,left 和 right 表示运算符左右的两个表达式,operator 表示一个二元运算符。


  1. interface BinaryExpression <: Expression { 
  2.     type: "BinaryExpression"
  3.     operator: BinaryOperator; 
  4.     left: Expression; 
  5.     right: Expression; 

BinaryOperator

二元运算符,所有值如下:


  1. enum BinaryOperator { 
  2.     "==" | "!=" | "===" | "!==" 
  3.          | "<" | "<=" | ">" | ">=" 
  4.          | "<<" | ">>" | ">>>" 
  5.          | "+" | "-" | "*" | "/" | "%" 
  6.          | "|" | "^" | "&" | "in" 
  7.          | "instanceof" 
  8. }  

AssignmentExpression

赋值表达式节点,operator 属性表示一个赋值运算符,left 和 right 是赋值运算符左右的表达式。


  1. interface AssignmentExpression <: Expression { 
  2.     type: "AssignmentExpression"
  3.     operator: AssignmentOperator; 
  4.     left: Pattern | Expression; 
  5.     right: Expression; 
  6. }  

AssignmentOperator

赋值运算符,所有值如下:(常用的并不多)


  1. enum AssignmentOperator { 
  2.     "=" | "+=" | "-=" | "*=" | "/=" | "%=" 
  3.         | "<<=" | ">>=" | ">>>=" 
  4.         | "|=" | "^=" | "&=" 
  5. }  

LogicalExpression

逻辑运算表达式节点,和赋值或者二元运算类型,只不过 operator 是逻辑运算符类型。


  1. interface LogicalExpression <: Expression { 
  2.     type: "LogicalExpression"
  3.     operator: LogicalOperator; 
  4.     left: Expression; 
  5.     right: Expression; 
  6. }  

LogicalOperator

逻辑运算符,两种值,即与或。


  1. enum LogicalOperator { 
  2.     "||" | "&&" 
  3. }  

MemberExpression

成员表达式节点,即表示引用对象成员的语句,object 是引用对象的表达式节点,property 是表示属性名称,computed 如果为false,是表示 . 来引用成员,property 应该为一个 Identifier 节点,如果 computed 属性为 true,则是 [] 来进行引用,即property 是一个 Expression 节点,名称是表达式的结果值。


  1. interface MemberExpression <: Expression, Pattern { 
  2.     type: "MemberExpression"
  3.     object: Expression; 
  4.     property: Expression; 
  5.     computed: boolean; 
  6. }  

下边是其他的一些表达式:

ConditionalExpression

条件表达式,通常我们称之为三元运算表达式,即 boolean ? true : false。属性参考条件语句。


  1. interface ConditionalExpression <: Expression { 
  2.     type: "ConditionalExpression"
  3.     test: Expression; 
  4.     alternate: Expression; 
  5.     consequent: Expression; 
  6. }  

CallExpression

函数调用表达式,即表示了 func(1, 2) 这一类型的语句。callee 属性是一个表达式节点,表示函数,arguments 是一个数组,元素是表达式节点,表示函数参数列表。


  1. interface CallExpression <: Expression { 
  2.     type: "CallExpression"
  3.     callee: Expression; 
  4.     arguments: [ Expression ]; 
  5. }  

NewExpression

new 表达式。


  1. interface NewExpression <: CallExpression { 
  2.     type: "NewExpression"
  3. }  

SequenceExpression

这个就是逗号运算符构建的表达式(不知道确切的名称),expressions 属性为一个数组,即表示构成整个表达式,被逗号分割的多个表达式。


  1. interface SequenceExpression <: Expression { 
  2.     type: "SequenceExpression"
  3.     expressions: [ Expression ]; 
  4. }  

Patterns

模式,主要在 ES6 的解构赋值中有意义,在 ES5 中,可以理解为和 Identifier 差不多的东西。


  1. interface Pattern <: Node { } 

这一部分的内容比较多,但都可以举一反三,写这个的时候我就当把 JavaScript 语法再复习一遍。这个文档还有 ES2015,ES2016,ES2017 相关的内容,涉及的东西也蛮多,但是理解了上边的这一些,然后从语法层面去思考这个文档,其他的内容也就很好理解了,这里略去,有需要请参阅:The Estree Spec。

Plugins

回到我们的主角,Acorn,提供了一种扩展的方式来编写相关的插件:Acorn Plugins。

我们可以使用插件来扩展解析器,来解析更多的一些语法,如 .jsx 语法,有兴趣的看看这个插件:acorn-jsx。

官方表示 Acorn 的插件是用于方便扩展解析器,但是需要对 Acorn 内部的运行极致比较了解,扩展的方式会在原本的基础上重新定义一些方法。这里不展开讲了,如果我需要插件的话,会再写文章聊聊这个东西。

Examples

现在我们来看一下如何应用这个解析器,例如我们需要用来解析出一个符合 CommonJS 规范的模块依赖了哪些模块,我们可以用 Acorn 来解析 require 这个函数的调用,然后取出调用时的传入参数,便可以获取依赖的模块。

下边是示例代码:


  1. // 遍历所有节点的函数 
  2. function walkNode(node, callback) { 
  3.   callback(node) 
  4.  
  5.   // 有 type 字段的我们认为是一个节点 
  6.   Object.keys(node).forEach((key) => { 
  7.     const item = node[key
  8.     if (Array.isArray(item)) { 
  9.       item.forEach((sub) => { 
  10.         sub.type && walkNode(sub, callback) 
  11.       }) 
  12.     } 
  13.  
  14.     item && item.type && walkNode(item, callback) 
  15.   }) 
  16.  
  17. function parseDependencies(str) { 
  18.   const ast = acorn.parse(str, { ranges: true }) 
  19.   const resource = [] // 依赖列表 
  20.  
  21.   // 从根节点开始 
  22.   walkNode(ast, (node) => { 
  23.     const callee = node.callee 
  24.     const args = node.arguments 
  25.  
  26.     // require 我们认为是一个函数调用,并且函数名为 require,参数只有一个,且必须是字面量 
  27.     if ( 
  28.       node.type === 'CallExpression' && 
  29.       callee.type === 'Identifier' && 
  30.       callee.name === 'require' && 
  31.       args.length === 1 && 
  32.       args[0].type === 'Literal' 
  33.     ) { 
  34.       const args = node.arguments 
  35.  
  36.       // 获取依赖的相关信息 
  37.       resource.push({ 
  38.         string: str.substring(node.range[0], node.range[1]), 
  39.         path: args[0].value, 
  40.         start: node.range[0], 
  41.         end: node.range[1] 
  42.       }) 
  43.     } 
  44.   }) 
  45.  
  46.   return resource 
  47. }  

这只是简单的一个情况的处理,但是已经给我们呈现了如何使用解析器,Webpack 则在这个的基础上做了更多的东西,包括 var r = require; r('a') 或者 require.async('a') 等的处理。

AST 这个东西对于前端来说,我们无时无刻不在享受着它带来的成果(模块构建,代码压缩,代码混淆),所以了解一下总归有好处。


作者:teabyii

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7421 0
JavaScriptCore 框架详细解析
JavaScriptCore 框架详细解析(一) —— 基本概要JavaScriptCore 框架详细解析(二) —— JS与OC通信JavaScriptCore 框架详细解析(三) —— 内存管理与线程安全JavaScriptCore 框架详细解析(...
832 0
C# 获取与解析枚举类型的 DescriptionAttribute
原文:C# 获取与解析枚举类型的 DescriptionAttribute System.ComponentModel.DescriptionAttribute 这个 Attribute,经常被用来为属性或事件提供说明,这个说明是可以被本地化的。
1127 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9132 0
代码翻译尝试-使用Roaster解析和生成Java源码
解析Java源码, 并将标识符翻译为中文. Parse Java source code and translate the identifiers to Chinese.
657 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10729 0
第112天:javascript中函数预解析和执行阶段
关于javascript中的函数:   1、预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前   2、执行 :从上到下执行,但有例外(setTimeout,setInterval,ajax中的回调函数,事件中的函数需要触发执行) 函数的参数可以是一个函数,这个函数可以直接调用   函数可以作为返回值   函数的嵌套形成闭包 function有双重身份:   1、对象   2、构造函数 一、定义 预解析:在当前作用域下,js运行之前,会把带有var和function关键字的事先声明,并在内存中安排好。
1127 0
+关注
行者武松
杀人者,打虎武松也。
17142
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载