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

tci*_*and 2 javascript gulp babeljs angular

将装饰器(@Component + @View)转换为es5时,Babel会出错.我在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);
Run Code Online (Sandbox Code Playgroud)

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'));
});
Run Code Online (Sandbox Code Playgroud)

Joe*_* V. 5

巴别塔6

我有问题让装饰者使用Babel 6.截至今日(2016-01-17),我收到一个错误

在6.x待定提案更新中尚不支持装饰器.

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

我必须安装以下npm包:

  • 巴贝尔-插件语法,装饰
  • 巴别塔 - 插件 - 转换 - 装饰遗留

我的.babelrc看起来像

{
  "presets": ["es2015"],
  "plugins": ["transform-decorators-legacy"]
}
Run Code Online (Sandbox Code Playgroud)