Question

我用：

"react": "^0.14.2"
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",

这是我的gulpfile配置：

// Compile and Watch
function compile() {

var bundler = watchify(browserify(
    {
        entries: source.jsx,
        debug: true,
        extensions: ['.jsx'],
        plugins: ["transform-class-properties"]
    }).transform(babel, {presets: ['es2015','stage-0', 'react']}));

function rebundle() {
    bundler.bundle()
        .on('error', function(err) {console.error(err); this.emit('end'); })
        .pipe(vinyl_source('bundle.js'))
        .pipe(buffer())
        .pipe($.if(useSourceMaps, $.sourcemaps.init({ loadMaps: true })))
        .pipe($.if(useSourceMaps, $.sourcemaps.write('./')))
        .pipe(gulp.dest(dist.scripts));
}

if (watch) {
    // watch html

    gulp.watch(source.html, ['replaceHTML']);

    bundler.on('update', function() {
        console.log('-> rebundle...');
        rebundle();
    })
}

    rebundle();
}

function watch() {
    return compile(true);
}


// build jsx
gulp.task('build', function() {
    return compile();
});

gulp.task('watch', function() {
    return watch();
});

主目录中的.babelrc文件包含以下内容：

{ "presets": ["es2015","stage-0","react"] }

这就是我想要运行的内容（source）：

R = React.DOM

nations = ['britain', 'ireland', 'norway', 'sweden', 'denmark', 'germany',
  'holland', 'belgium', 'france', 'spain', 'portugal', 'italy',     'switzerland']

Typeahead = React.createClass
  getInitialState : -> {input: ""}
  handleChange    : -> @setState input: @refs.field.getDOMNode().value
  handleClick     : (nation)-> @setState input: nation
  matches         : (input)->
  regex = new RegExp(input, "i")
_.select nations, (nation)-> nation.match(regex) && nation != input
  render: ->
    R.div {},
      R.input {ref:'field', onChange: @handleChange, value: @state.input}
      R.br {}
      _.map @matches(@state.input), (nation)=>
        Button {handleClick: @handleClick, name: nation}

Button = React.createClass
  onClick: -> @props.handleClick(@props.name)
  render:  ->
    classes = "btn btn-xs btn-default"
    R.button {className: classes, onClick: @onClick}, @props.name

$(document).ready ->
  React.render React.createFactory(Typeahead)(), $('#typetest')[0]

这是我得到的错误：

 Unexpected token (16:21) while parsing file: ...

以下是：

getInitialState : -> {input: ""}

最有可能是由＆＃34; - ＆gt;＆＃34;标志。为什么即使在gulp中进行所有设置也会发生这种情况？

ReactJS + browserify + babel：未知令牌错误

0 个答案: