带有 Babelify 7 和 browserify 的 ES7 Mobx 装饰器，意外令牌 @

Question

尝试在 Babelify 7.3.0 和 Browserify 14.4.0 中使用 Mobx 装饰器。诚然，这是非常新的，这是该堆栈的第一次设置。从 babel 获取装饰器的语法错误。

  { SyntaxError: /home/forrest/code/noat/views/js/main.js: Unexpected token (24:23)
  22 | 
  23 | class incrementStore {
> 24 |     @observable number = 0;
     |                        ^
  25 | 
  26 |     constructor() {
  27 |         mobx.autorun(() => console.log(this.report));

这是有问题的代码

const React = require('react');
const ReactDOM = require('react-dom');
const r = require('r-dom')
const $ = global.jQuery = require('jquery');
//bootstrap = require('bootstrap')
const rbs = require('react-bootstrap');
import {observer} from 'mobx-react';

//an example react component to render stuff
@observer
class Incrementer extends React.Component {

    //@observer
    render() {
        const store = this.props.store;
        return(r.div([
            r.h1("#{this.props.count}"),
            r(rbs.Button, {bsStyle: 'info', onClick:Incrementer.increment}[r.span('Increment')])
        ]))
    }
}

//an example model to hold onto data
class incrementStore {
    @observable number = 0;

    constructor() {
        mobx.autorun(() => console.log(this.report));
    }
    @computed get getNumber() {
        return number;
    }

    increment() {
        number += 1;
    }
}

let mainElement = r(Incrementer);

$(document).ready(()=> {
    ReactDOM.render(mainElement, $('#react-container')[0]);
});

这是我的构建系统：

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


let browserifyOptions = {entries: './js/main.js', extensions: ['.js'], debug: true}
gulp.task('build', function () {
    return browserify()
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('*.js', ['build']);
});


gulp.task('default', ['watch']);
    */


const watchify = require('watchify');

const browserify = require('browserify');
const babelify = require('babelify');

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const gutil = require('gulp-util');
const sourcemaps = require('gulp-sourcemaps');
const assign = require('lodash.assign');

let customBrowserifyOpts = {
    entries: ['./views/js/main.js'],
    debug: true//process.env.NODE_ENV !== 'production'
};

let browserifyOpts = assign({}, watchify.args, customBrowserifyOpts);

let b = watchify(browserify(browserifyOpts));


bundle = function() {
    return b
        .transform(babelify)
        .bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Stack Threw Error'))
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./public'));
};

gulp.task('js', bundle);

b.on('update', bundle);

b.on('log', gutil.log);

bundle();

最后是我的 .babelrc，我确认它可以被 babel 正确读取。

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

Answer 1

好吧，为了澄清我的一些困惑，没有 babel 7，只是 babelify 7，在底层使用 babel 6。Babel 6 实际上已经放弃了对装饰器的支持，尽管 babel 5 支持它。哇。我上面贴的错误其实不是装饰器没有被识别，而是类属性声明。这就是我的 .babelrc 现在的样子：

 {
  "presets": ["stage-0", "es2015"],
  "plugins": ["transform-imports", "transform-class-properties", 
  "transform-decorators-legacy"],
  "sourceMaps": true
}

babel 6 中的配置变得更加快乐。

legacy 转换是重新获得装饰器所必需的。没有 legacy 的“Transform Decorators”是一个不做任何事情的占位符。

想发布我成功的 babel 配置，以防其他人出现困惑。对于 babel 5 中的新用户来说，这会容易得多