Node.js/Angular/Webpack升级后出现语法错误求助

针对你升级Node.js 14→18、Angular 12→16、Webpack 3→5后，Webpack编译成功但浏览器报Uncaught SyntaxError: expected expression, got '='导致无UI的问题，这类错误核心原因是编译产出的代码包含了目标浏览器不支持的JavaScript语法特性，以下是针对性排查步骤：

1. 核对目标环境配置 #

• 检查tsconfig.json的target字段：Angular 16默认推荐ES2022，但如果你的目标浏览器版本较低，需调整为ES2015或ES5，同时确保downlevelIteration等兼容性选项已开启。
• 校验babel.config.json的targets规则：明确指定需要支持的浏览器范围，示例配置：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ]
  }
  

• 确认Webpack 5的output.environment设置：手动禁用目标浏览器不支持的语法特性，比如：

  output: {
    environment: {
      arrowFunction: false,
      const: false,
      optionalChaining: false
    }
  }
  

2. 验证Polyfills配置有效性 #

• Angular 16移除了部分旧版polyfills，检查polyfills.ts是否导入了必要的兼容包（如core-js/stable、regenerator-runtime/runtime），避免因polyfill缺失导致高版本语法无法被处理。
• 确保Webpack的entry配置中包含polyfills.js，且Babel的useBuiltIns配置为usage，实现按需注入polyfill。

3. 检查Webpack Loader转译规则 #

• 确认ts-loader与babel-loader的配置顺序（Babel需在TS-loader之前执行），确保所有.ts和.js文件都被正确转译：

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          { loader: 'babel-loader', options: { configFile: './babel.config.json' } },
          'ts-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
  

• 检查Webpack 5的resolve.extensions，确保包含.ts、.js、.mjs等后缀，避免模块解析异常。

4. 定位报错代码的具体语法 #

• 打开浏览器控制台中报错的app.js和polyfills.js对应行，确认是哪种语法触发错误（比如类的公共字段、可选链、空值合并运算符等）。
• 如果报错来自第三方依赖，需修改Webpack配置，将该依赖从exclude: /node_modules/中移除，强制对其进行转译。

5. 确认Node.js版本适配 #

• Node.js 18对ES模块的处理逻辑有变化，检查package.json的type字段：如果项目使用CommonJS模块，无需设置；若使用ES模块，需设为"type": "module"，避免模块解析错误间接引发语法问题。

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