Uglifyjs 意外的令牌名称错误

Question

附件是我在尝试捆绑我的项目以进行生产时收到的图像。如图所示，我收到 Unexpected token name <<Object>>, expected punc <<,>> 消息。

Terminal output of error

不确定是什么问题，但我尝试使用 uglify-es 和 uglify-js 并得到相同的错误。我什至尝试使用 es6+ 代码制作一个简单的应用程序，以查看 uglify-js 是否有效并且确实有效。因此，互联网上一些较旧的线程提到 uglify-js 不会处理 es6+ 代码现在可能无关紧要。我还在某处读到最新版本 (3.x) 确实支持它，但无法确认。

我很想展示一些代码，但不确定我需要展示哪些相关代码。根据图像，它还提到了行、col、pos 等...但是该行上的代码不是从提到的 col 编号开始的。

我一定会在调查时更新此 post，但任何提示或想法都会很棒！

Answer 1

UglifyJS 说它在预期 , 的地方看到 Object，所以我们可以推断：

您编写的代码（或在 uglifyJS 处理它之前由其他工具生成的代码，例如 babel？虽然您可能不使用 babel，因为您的 uglifyJS 直接处理 es6）是“Object”，其中发生错误。
它期待 ,，所以错误发生在某些地方，例如多变量声明，let foo, bar，或 object/array 定义，[1, 2] {foo: 1, bar: 2}

Answer 2

所以经过一番深入研究，这个问题现在已经解决了。看起来我在 non-optimised 包 app.js 中查看的第 1665 行并不是我需要查看的内容（很明显，因为列索引偏离了）。

所以我决定输出 FuseBox 正在处理的包生成的代码，它 in-fact 不同。这是我在 uglifyBundle function 里面的 node_modules/fuse-box/quantum/plugin/BundleWriter.js 中添加的行，用于输出内容，以便我可以清楚地阅读它。

fs.writeFile('bundle.txt', bundle.generatedCode);

bundle.txt 中的输出是问题所在，我的实际 TypeScript 代码显示在此处：

// bundle.txt line 1665
this.wholesalerSettings = [object Object]

// actual project code
constructor() {
    this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
    this.API = this.setHostUrl();
}

所以我查看了 fuse.ts 文件，发现我没有正确解析 json 对象。

public get wholesalerSettings()
{
    const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
    return JSON.stringify(wholesaler);
}

// then down in the environment plugin
EnvPlugin({ 
    WHOLESALERSETTINGS: this.wholesalerSettings,
    IMAGE_PATH: this.imagePath
}),

一旦我用 JSON.stringify 正确解析了对象，它就完美地工作了，因为 process.env.WHOLESALERSETTINGS 现在是 JSON 字符串而不是对象。

我第一次真正处理 devops 的东西，但很有趣，同时压力很大。我想我学到的主要内容是当你处理工具和第三方工具时（FuseBox 使用 uglify-js），那么你需要仔细查看提供给该工具的输入而不是像这样的输出我是一开始。

Uglifyjs 意外的令牌名称错误

Uglifyjs unexpected token name error

bundle

uglifyjs

reactjs