Babel 和解构的 ng-annotate 错误答案

【问题标题】：ng-annotate error with Babel and destructuringBabel 和解构的 ng-annotate 错误
【发布时间】：2015-12-04 19:58:10
【问题描述】：

使用 Babel 转译到 ES6 时出现奇怪的错误，ng-annotate 不喜欢解构。我将源代码复制到在线 babel 编译器中，它工作正常。在我的 gulp 管道链中注释掉 ng-annotate 可以消除错误。删除文件中的/* @ngAnnotate */ 注释并手动注入也不会改变任何内容。

Gulp 部分：

return gulp.src(config.scripts.app)
    .pipe(changed(config.dist + '/scripts'))
    .pipe(plumber())
    .pipe(annotate())

    // Filter out and transpile only .es6.js files
    .pipe(es6)
    .pipe(babel({
        presets: ['es2015'],
        plugins: ['extensible-destructuring'],
        comments: false
    }))
    .pipe(es6.restore)

    .pipe(concat('scripts.js'))
    .pipe(gulp.dest(config.dist + '/scripts'))

有问题的来源：

var [min, max] = values.map(val => +val);
// let/var doesn't make a difference.

ngModelCtrl.$modelValue = [min, max];

错误来自ng-annotate 中的依赖项：

Error: StringMap expected string key
    at stringmap.set (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/node_modules/stringmap/stringmap.js:101:19)
    at Scope.add (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scope.js:102:17)
    at /Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scopetools.js:38:25
    at Array.forEach (native)
    .... more

stringmap.js 有问题的函数：

stringmap.prototype.set = function(key, value) {    
    if (typeof key !== "string") {
        throw new Error("StringMap expected string key");
    }
    if (key === "__proto__") {
        this.hasProto = true;
        this.proto = value;
    } else {
        this.obj[key] = value;
    }
};

退出上述函数中的key 和value 会返回：

undefined { 
    kind: 'var', 
    node: { 
        type: 'ArrayPattern',
        start: 1178,
        end: 1188,
        loc: { start: [Object], end: [Object] },
        range: [ 1178, 1188 ],
        elements: [ [Object], [Object] ] 
    },
    from: 1215 
}

显然key 参数是未定义的，但它为什么还要关心呢？

【问题讨论】：

我有类似的问题，我只是简单地将 gulp 管道中的顺序更改为：babel --> annotate。 ng-annotate 不支持新的 JS 版本：github.com/olov/ng-annotate/issues/237.
感谢@illagrenan，是的，经过反复试验（保留 cmets 等），我最终只是将 .es6.js 文件传送到 babel 并跳过了隐式 ng-annotate。无论如何，我越来越喜欢显式注释:) 总有一天，无论如何都会将所有文件都放到 es2015 中。
@illagrenan 更改任务顺序也对我有用 :) 谢谢
我们遇到了问题 ng Annotate 插件并切换到 babel-plugin-angularjs-annotate 并修复了问题。但是我们在 webpack 中使用这个插件
@illagrenan 你能回答这个问题吗？找到通过 cmets 工作的解决方案可能会很棘手:(

标签： javascript angularjs babeljs destructuring ng-annotate

【解决方案1】：

我有类似的问题，我只是简单地将 gulp 管道中的顺序更改为： babel --> 注释。 ng-annotate 不支持新的 JS 版本：github.com/olov/ng-annotate/issues/237

最初由@illagrenan 在上面的评论部分回答

【讨论】：