使用 babel 的简单 ES7 装饰器

我无法运行此代码：https://www.npmjs.com/package/core-decorators#readonly https://www.npmjs.com/package/core-decorators#readonly

我使用 gulp 和 babel。我有 package.json

{
  "name": "my-first-decorator",
  "version": "0.0.1",
  "dependencies": {
    "core-decorators": "^0.8.1"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.0.14",
    "babel-plugin-transform-decorators": "^6.0.14",
    "babel-preset-es2015": "^6.1.2",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

我有 gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('default', function () {
    return browserify({entries: 'app.js', extensions: ['.js'], debug: true})
        .transform('babelify', {
            presets: ['es2015'],
            plugins: ['transform-class-properties', 'transform-decorators']
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

我的应用程序.js

import { readonly } from 'core-decorators';

class Meal {
  @readonly
  entree = 'steak';
}

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

我写到控制台：

$ npm install
$ gulp

我打开浏览器，但控制台是空的。 应该有： 无法分配给 [object Object] 的只读属性“entree”

编译后我的应用程序：

var _coreDecorators = require('core-decorators');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Meal = function Meal() {
  _classCallCheck(this, Meal);
};

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

您需要添加stage-1预设，因为装饰器还不是标准化的（所以它们不是也不会包含在es2015预设）。

https://babeljs.io/docs/plugins/preset-stage-1/ https://babeljs.io/docs/plugins/preset-stage-1/