Babelify 7を搭載したMobxデコレータ、予期しないトークン@

Question

Babelify 7.3.0とBrowserify 14.4.0でMobx Decoratorを使用しようとしています。確かに、これは非常に新しく、このスタックの初めてのセットアップです。デコレータの構文エラーをバベルから取得する。

{ 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、ちょうどバベル5がそれをサポートしていても、実際にデコレータのサポートを落としたバベル6バベル6を使用してボンネットの下に、7をbabelifyはありません。ワオ。私が上に投稿したエラーは実際には認識されていないデコレータではなかった、それはクラスプロパティの宣言でした。これは私の.babelrcが今のように見えるものです：

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

物事はレガシー変換をより多く設定し、幸せバベル6に

が後ろにデコレータを取得する必要がありましたレガシーなし「デコレーターを変換します」。何もしないプレースホルダです。

私の成功したバベルの構成を投稿したいと思っている人は誰も混乱していません。これは、バーベル5の新しいユーザーの方がはるかに簡単だったでしょう5