Question

我已经在我的一个项目上使用Webpack了一段时间，这一直很棒，直到今天早上我更新了我的devdeps。它仍然很棒，但我有一个神秘的错误：

{ SyntaxError: Unexpected token (1:5)
at Parser.pp$4.raise (\node_modules\acorn\dist\acorn.js:2431:15)
at Parser.pp.unexpected (\node_modules\acorn\dist\acorn.js:616:10)
at Parser.pp$3.parseExprAtom (\node_modules\acorn\dist\acorn.js:1963:12)
at Parser.parseExprAtom (\node_modules\acorn-dynamic-import\lib\inject.js:55:31)
at Parser.pp$3.parseExprSubscripts (\node_modules\acorn\dist\acorn.js:1831:21)
at Parser.pp$3.parseMaybeUnary (\node_modules\acorn\dist\acorn.js:1808:19)
at Parser.pp$3.parseExprOps (\node_modules\acorn\dist\acorn.js:1750:21)
at Parser.pp$3.parseMaybeConditional (\node_modules\acorn\dist\acorn.js:1733:21)
at Parser.pp$3.parseMaybeAssign (\node_modules\acorn\dist\acorn.js:1710:21)
at Parser.pp$3.parseParenAndDistinguishExpression (\node_modules\acorn\dist\acorn.js:2008:32) pos: 5, loc: Position { line: 1, column: 5 }, raisedAt: 5 }

当我的代码都没有在调用堆栈中时，我喜欢它！ :)

在继续之前，有几点要说明这一点。

错误仅发生在生产版本和单元测试上。它不会出现在开发版
错误不会导致任何失败。构建完成。所有测试都正常运行并通过。对生产构建没有明显的负面影响。

我花了几分钟的时间来追踪违规行。原来它是Webpack Defineplugin，或者更确切地说，我是如何使用它的。我一直有条件地将调试日志注入到我的代码中而没有包装条件：

new webpack.DefinePlugin({
    DEBUG_LOG:  DEBUG ? 'console.log' : '// ',
    DEBUG_WARN: DEBUG ? 'console.warn' : '// ',
    DEBUG_ERR:  DEBUG ? 'console.error' : '// '
}),

用法很简单：

DEBUG_LOG('something useful');
DEBUG_WARN('something unusual');
DEBUG_ERR('fire bad! fire bad!');

当它在dev中运行时，我得到有用的调试消息，并且在prod中这些消息被转换为注释并被minifier剥离。

看起来Webpack正在使用AcornJS，它对我在这里所做的事情并不满意，我也无法弄清楚原因。在运行插件之前，他们只评估未定义的函数。在dev中，他们评估为console.log s，而Acorn似乎很好用。在prod / test中，他们评估评论，这也是好的（只要他们是单行评论，他们是）。一方面，一切似乎都在起作用，但是错误让我很谨慎，我想了解为什么它会在重新发布之前抱怨它。有什么想法吗？

Answer 1

在您的调试版本中，webpack执行以下操作：

DEBUG_LOG('test ' + myvar);

变为

(console.log)('test ' + myvar);

所以它是一个IIFE（立即调用函数执行），而不仅仅是人们会想到的字符串替换。这意味着评论不起作用，因为它会创建如下内容：

(//)('test ' + myvar);

显然错误的语法错误，这就是失败的地方。

我认为您的解决方案很脆弱，建议改用strip-loader。

使用Webpack defineplugin记录

1 个答案: