Angular.js项目构建出现ForInStatement相关Babel报错求助

我们的项目采用Angular.js框架，通过Maven与Bower构建，此前构建流程一直正常，但从昨日开始执行构建时出现以下报错：

Warning: /builds/t2i/xecm/xecm-webapp/src/main/webapp/services/document-service.js: Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got undefined Use --force to continue.

经排查确认：

• 未修改任何依赖（包括Babel）
• 报错涉及的document-service.js文件最后一次修改是在2个月前，期间构建均正常

搜索得知该问题与Babel版本相关，但无法理解为何突然出现此问题。以下是项目相关配置信息，求助问题原因及解决方法：

bower.json配置 #

{
    "name": "${project.artifactId}",
    "version": "{project.version}",
    "homepage": "https://example.com/",
    "appPath": "webapp",
    "main": ["./${project.artifactId}.js"],
    "private": true,
    "dependencies": {
        "json3": "~3.2.6",
        "angular-resource": "1.6.4",
        "angular-cookies": "1.6.4",
        "angular-route": "1.6.4",
        "angular-animate": "1.6.4",
        "angular-sanitize": "1.6.4",
        "angular-touch": "1.6.4",
        "angular-gestures": "0.3.1",
        "angular-spinner": "1.0.1",
        "angular-css-injector": "1.4.0",
        "angular-truncate": "*",
        "angular-dynamic-locale": "~0.1.32",
        "angular-once": "~0.1.8",
        "angular-capitalize-filter": "~3.0.0",
        "angular-ui-router": "1.0.5",
        "xcomponent-widgets": "${project.build.directory}/${bower.components.dir}/xcomponent-widgets",
        "angular": "1.6.4",
        "ng-img-crop": "0.3.2",
        "angular-bootstrap-switch": "0.5.2",
        "angular-toastr": "2.1.1",
        "angular-moment": "1.0.1",
        "moment-timezone": "0.5.13",
        "moment": "2.15.2",  
        "ng-focus-if": "1.0.5",
        "ng-file-upload": "12.2.3",
        "ng-device-detector": "4.0.3",
        "textAngular":"1.5.16",        
        "angular-base64":"2.0.4",
        "jspdf":"1.3.2",
        "angular-clipboard":"1.5.0",
        "ngclipboard":"1.1.1",
        "angular-swx-session-storage":"1.0.2",
        "angular-cache":"4.6.0",
        "angular-highlightjs":"0.4.0",
        "angularjs-slider": "6.4.3",
        "angular-ui-select": "0.19.8",
        "angular-bootstrap":"2.5.0"
    },
    "overrides": {
        "bootstrap": {
            "main": [
                "less/bootstrap.less",
                "dist/css/bootstrap.css",
                "dist/js/bootstrap.js"
            ]
        }
    },
    "devDependencies": {
        "angular-mocks": "1.6.4",
        "angular-scenario": "1.6.4",
        "bootstrap": "~3.1.1"
    },
    "resolutions": {
        "angular": "1.6.4",
        "jquery": ">=1.9.0",
        "bootstrap": "~3.1.1",
        "moment": "2.15.2",
        "ng-file-upload": "10.1.5"
    }
}

Gruntfile-dev.js中Babel配置 #

babel: {
            options: {
                sourceMap: true,
                presets: ['@babel/preset-env'],
                sourceType: 'module'
            },
            dev: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.sources %>',
                    dest: '<%= yeoman.dev %>',
                    src: [
                        '**/*.js'
                    ]
                }]
            }
        },

可能原因 #

1. 间接依赖版本变更：虽然未手动修改依赖，但Babel的间接依赖（如@babel/core、@babel/parser等）可能在构建环境中被自动更新。新版本Babel parser对语法校验更严格，之前能通过的不规范语法（比如for-in循环左侧的语法错误）现在会触发警告。
2. 构建环境缓存失效：构建环境缓存被清理后，重新拉取依赖时意外获取了更新后的Babel相关包。
3. 代码隐藏语法问题：document-service.js中存在不规范的for-in循环写法，例如：

   // 错误示例：左侧无合法变量声明或左值
   for ( in obj ) { ... }
   

   旧版Babel parser对这类语法容错性更高，新版本则直接抛出警告。

解决方法 #

方法1：锁定Babel相关依赖版本 #

在项目package.json中明确指定@babel/core、@babel/preset-env、grunt-babel等包的具体版本，避免自动更新。示例：

{
  "devDependencies": {
    "@babel/core": "7.20.0",
    "@babel/preset-env": "7.20.0",
    "grunt-babel": "8.0.0"
  }
}

执行npm install重新安装依赖后再尝试构建。

方法2：修复代码中的语法问题 #

检查document-service.js中的for-in循环代码，确保左侧是合法的变量声明或左值。修改示例：

// 正确写法
for (const key in obj) {
  // 业务逻辑代码
}

方法3：临时跳过警告（不推荐） #

若需紧急构建，可在Grunt命令后添加--force参数强制继续，但这只是临时方案，建议后续尽快修复根本问题。

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