javascript - Angular2 + Babel + Gulp - 装饰器不会转换为 es5

Question

Babel 在将装饰器(@Component + @View)转换为 es5 时出错。我是否在我的 gulp 文件中遗漏了一些东西，或者我怎样才能让它工作？

ES2015 文件 (App.es6)

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-app'
})
@View({
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  name: string;
  constructor() {
    this.name = 'Alice';
  }
}

bootstrap(MyAppComponent);

Gulp 文件

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('App.es6')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Answer 1

通天塔 6

我在让装饰器与 Babel 6 一起工作时遇到问题。从今天 (2016-01-17) 开始，我收到一个错误

Decorators are not supported yet in 6.x pending proposal update.

我必须做的解决方案是使用 babel-plugin-transform-decorators-legacy

我必须安装以下 npm 包:

• babel-plugin-syntax-decorators
• babel-plugin-transform-decorators-legacy

我的 .babelrc 看起来像

{
  "presets": ["es2015"],
  "plugins": ["transform-decorators-legacy"]
}