升级Prettier后，使用Webpack-Obfuscator的NX项目构建失败

数据老陈

2026-6-19

问题

我在开发基于Nx的Angular项目，已经配置了包含webpack-obfuscator的自定义Webpack插件做代码混淆。把prettier包升级到3.3.3版本（还没执行过Prettier格式化）后，执行NX构建时出现了如下错误：

NX ERROR at line 222: Unexpected token (222:18)
HookWebpackError: ERROR at line 222: Unexpected token (222:18)
...
Error: ERROR at line 222: Unexpected token (222:18)
at Function.processParsingError (webpack://javascript-obfuscator/./src/ASTParserFacade.ts:77:15)
...

移除自定义Webpack插件后构建就正常了，推测这个错误和WebpackObfuscator插件有关，怀疑是混淆过程中Promise处理出了问题。有没有人遇到过类似问题，或者知道升级Prettier引发这个问题的原因？

我的插件代码如下：

import * as webpack from 'webpack';
const WebpackObfuscator = require('webpack-obfuscator');

const webpackConfig = (config: webpack.Configuration): webpack.Configuration => {
  config.plugins!.push(
    new WebpackObfuscator({
        compact: true,
        stringArray: true,
        stringArrayThreshold: 0.8,
        splitStrings: true,
        splitStringsChunkLength: 10,
        rotateStringArray: true,
        selfDefending: true,
        shuffleStringArray: true,
        target: 'browser-no-eval'
     }, ['polyfills*', 'vendor*', 'loader*'])
  );
  return config;
};

export default webpackConfig;

可能的原因与解决方案

依赖冲突连锁反应
Prettier 3.x的依赖树和2.x差异较大，即使没执行格式化，升级后项目的间接依赖版本可能发生变化，干扰了webpack-obfuscator依赖的javascript-obfuscator的AST解析逻辑，导致解析代码时触发语法错误。
AST解析兼容性问题
javascript-obfuscator的解析器可能对Prettier升级后引入的语法解析库（如acorn、espree）生成的AST结构不兼容，处理Promise相关语法时出现意外token错误。
可尝试的解决步骤
1. 调整混淆插件版本：升级webpack-obfuscator到最新版，或者锁定javascript-obfuscator到与Prettier 3.x兼容的版本，排查是否是版本兼容问题。
2. 修改混淆配置：暂时关闭selfDefending选项（该选项会增加代码防御性转换，易与新依赖冲突），或降低stringArrayThreshold减少混淆范围，定位是否是特定代码片段引发的问题。
3. 统一间接依赖版本：用npm ls或yarn list查看webpack-obfuscator和Prettier的共同依赖，若存在版本不一致的语法解析库，手动在package.json的resolutions（yarn）或overrides（npm）中统一版本。
4. 临时隔离Prettier影响：在NX构建配置中跳过Prettier相关钩子，确认是否是Prettier的间接依赖导致的问题。

内容的提问来源于stack exchange，提问作者tony