Azure构建机器代码编译失败：Module parse failed错误求助

问题重现 #

编译报错：Module parse failed: Unexpected token (8:39)
系统提示：需配置合适的加载器处理该文件类型，当前无可用加载器配置
已尝试切换Node.js版本（12.x → 14.x），问题未解决

常见原因 #

• 代码使用了ES2020+新语法（如可选链?.、空值合并??），当前构建工具未配置转译
• Webpack/Babel等构建工具版本过低，无法识别新语法
• 构建工具的加载器配置缺失，未覆盖包含新语法的文件

解决步骤 #

1. 定位报错代码 #

查看报错行（第8行第39位），确认是否使用了未转译的ES新语法。例如：

const value = obj?.property ?? 'default';

2. 配置Babel转译 #

如果确认是ES新语法导致，添加Babel处理：

• 安装依赖：

  npm install @babel/core @babel/preset-env babel-loader --save-dev
  

• 创建.babelrc配置文件：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "node": "14"
        }
      }]
    ]
  }
  

• 更新Webpack配置（若使用Webpack）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    }
  };
  

3. 升级构建工具 #

若Webpack版本过低，执行升级：

npm update webpack webpack-cli --save-dev

4. 检查Azure构建流程 #

确保Azure Pipeline中先完成依赖安装，配置示例：

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js 14.x'
- script: npm ci
  displayName: 'Install dependencies'
- script: npm run build
  displayName: 'Build project'

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