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

默认情况下不启用 ES7 装饰器，因为它们仅处于 ECMAScript 规范的提案阶段。 Babel 将阶段 2 作为默认阶段。

要使 Babel 能够使用不稳定的功能，您可以在您的项目文件夹中创建一个 .babelrc 并包含以下内容

Babel5

{
    "stage": 1
}

如果不想使用 rc 文件，也可以使用 babel --stage 1。

Babel6

{
  "presets": ["stage-1"]
}

您可以阅读更多有关 Babel 支持的实验性功能的信息here

Answer 2

通天塔 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"]
}

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

Angular2 + Babel + Gulp - Decorators won't convert to es5

javascript

gulp

babeljs

angular

Babel5

Babel6

通天塔 6