客户端JavaScript上的uglifyjs？ （或替代解析器） [英] uglifyjs on client-side javascript ? (or an alternative parser)

问题描述

我需要从javascript
中解析（并可能修改）一个js表达式（具体来说，我想在实际eval之前标记一些eval（）表达式）

I need to parse (and possibly modify) a js expression from within javascript (Specifically i want to markup some eval() expressions before the actual eval)

我真的很喜欢UglifyJS README示例，但是，las，它需要node.js
有什么方法可以使其在客户端浏览器上运行？！

I really like the UglifyJS README examples, but alas, it needs node.js Is there any way to get this to run on clientside browser?!

（我不是真正的js专家，所以如果我完全误解了这个
平台的问题，请告诉我）

(i am not really a js expert so if i am completely misunderstanding this platform thingy please let me know)

如果没有，还有其他选择吗？ js解析器？
当前我正在寻找LintJS或esprima或类似的东西

Failing that, is there an alternative js parser ? Currently i am looking LintJS or esprima or something like that

推荐答案

UglifyJS在浏览器和NodeJS中均可工作，例如Esprima确实这样做（最好对每个浏览器的兼容性规范进行仔细检查）。实际上，您可以访问 UglifyJS 网站并打开您的浏览器，在浏览器中使用UglifyJS（首选Chrome）。检查器控制台并输入：

UglifyJS works in both the browser and NodeJS, like Esprima does (best to double check the browser compatibility specs though for each). In fact you can play around with UglifyJS in the browser (Chrome preferred) by going to the UglifyJS site and opening your inspector console and typing:

var ast = UglifyJS.parse("var foo= 1")

然后您可以浏览AST数据。例如，要获取变量声明的名称，请使用：

Then you can explore the AST data. For example to get the name of the variable declaration use:

ast.body[0].definitions[0].name.name // returns "foo"

如果要修改AST树，请研究结构，然后生成您自己的AST节点来扩展树。 UglifyJS文档还可以，并且学习该结构的格式有点费力（弹出对话框有点烦人，我不得不编写自己的文档解析器来创建自己喜欢学习的文档）。 AST节点只是简单的对象（不需要构造函数或原型，只是具有简单属性值的对象文字或子对象/对象数组），只要它们具有所有必需的属性和AST结构即可，您将拥有有效的AST树。例如，您可以这样更改变量名称：

If you want to modify the AST tree then study the structure and generate your own AST nodes to extend the tree. The UglifyJS documentation is ok, and the format to study the structure is a little hand-rolled (pop-up dialogs get a little annoying, I had to write my own documentation parser to create docs I could enjoy studying more). The AST nodes are just simple objects (no need for constructors or prototypes, just object literals with simple property values or sub objects/arrays of objects), as long as they have all the required properties and AST structures you'll have a valid AST tree. For example you could change the variable name like this:

ast.body[0].definitions[0].name.name = "bar";

修改树后，您可以使用代码生成器功能。像这样：

After modifying the tree, you can then print it back into Javascript source with the code generator feature. Like this:

// assuming variable ast already exists from above
var stream = UglifyJS.OutputStream(); // there are options you can pass to control basic formatting
ast.print(stream);
var code = stream.toString();
console.log(code); // equals "var bar=1;"

UglifyJS非常棒， Esprima 。 Esprima使用Spider Monkey AST格式，该格式是Java的著名AST标准，Uglify使用其自己的AST模型。我发现Esprima的AST格式干净但冗长，而UglifyJS较短，但不确定是否更干净。还有一些用于Esprima的工具，例如 Escodegen 来生成代码，就像UglifyJS一样。

UglifyJS is great, so is Esprima. Esprima uses the Spider Monkey AST format which is a well known AST standard for Javascript, Uglify uses it's own AST model. I find that Esprima's AST format is clean but verbose, while UglifyJS is shorter but not sure if it's cleaner. There are also tools for Esprima like Escodegen to generate code, like UglifyJS does.

最好去探索它们，看看自己感觉如何，它们都做类似的出色工作，并允许您自动化前所未有的重构和代码分析任务。

Best to explore them all and see where you feel comfortable, they all do similar great things and allow you to automate your re-factoring and code analysis tasks like never before.

这篇关于客户端JavaScript上的uglifyjs？ （或替代解析器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！