ES7 Mobx装饰与Babelify 7和browserify，意想不到的令牌@

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，我确认是越来越适当地读巴贝尔。

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

Answer 1

好了，所以要澄清一些我的困惑，没有通天7，只是用巴贝尔6巴贝尔6却下降了装修人员的支持babelify 7，引擎盖下，即使巴贝尔5支持它。哇。我上面发布的错误实际上并不是被识别的装饰器，它是类属性声明。这是我的.babelrc看起来像现在：

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

事情变得多了很多配置，快乐通天6

遗留变换是必要得到装饰早在“改造装修”不遗留是一个什么都不做的占位符。

想要发布我成功的配置文件，以免其他人感到困惑。这对于babel中的新用户来说会容易得多5