eval5是基于TypeScript编写的JavaScript解释器，100%支持ES5语法。

项目地址：https://github.com/bplok20010/eval5

使用场景

• 浏览器环境中需要使用沙盒环境执行JavaScript脚本
• 控制代码执行时长
• 不支持eval Function的JavaScript运行环境：如 微信小程序
• 研究/学习用

安装

npm install --save eval5

使用

import { Interpreter } from 'eval5';

const ctx = {

	console,

	hello(){

		console.log('hello eval5')

	}

}

var interpreter = new  Interpreter(ctx, {

	timeout: 1000

});

var result = interpreter.evaluate(`

	hello();

	function sum(a, b) {

		return a + b;

	}

	sum(100,2 00);

`)

console.log(result); // 300

eval5不支持es6语法，可以先将es6或typescript转成es5

原理

1. eval5先将源码编译得到树状结构的抽象语法树(AST)。
   
   抽象语法树由不同的节点组成，每个节点的type标识着不同的语句或表达式，例如: 1+1的抽象语法树

{

    "type": "Program",

    "body": [

        {

            "type": "ExpressionStatement",

            "expression": {

                "type": "BinaryExpression",

                "operator": "+",

                "left": {

                    "type": "Literal",

                    "value": 1,

                    "raw": "1"

                },

                "right": {

                    "type": "Literal",

                    "value": 1,

                    "raw": "1"

                }

            }

        }

    ],

    "sourceType": "script"

}

1. 根据节点type编写不同的处理模块并得到最终结果。例如：根据1+1的语法树我们可以写出一下解释器代码:

function handleBinaryExpression(node) {

    switch( node.operator ) {

        case '+':

            return node.left.value + node.right.value;

        case '-':

            return node.left.value - node.right.value;

    }

}

示例

在线体验

更多示例

以下是解析echarts4效果示例：