吞咽+ Browserify + Babelify意外令牌

Question

我使用Gulp来转换jsx/es6，使用Browserify和Babelify，但是我得到了一个错误：Unexpected token (7:12) while parsing file: app.jsx，我做错了什么？我可以的

app.jsx (7:12是<div>)

import React from 'react';
import Header from './header.jsx';

class App extends React.Component{
    render() {
        return (
            <div>
                <Header />
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default App;

gulpfile.js

var bundler = watchify(browserify({
    entries: './client/components/app.jsx',
    transform: [babelify],
    extensions: ['.jsx'],
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
}));

function bundle(file) {
    if (file) gutil.log('Recompiling' + file);
    return bundler
        .bundle()
        .on('error', gutil.log.bind(gutil, "Browserify Error"))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./client/scripts'))
}
bundler.on('update', bundle);

gulp.task('build', function() {
    bundle()
});

在我的package.json里，我有：

"browserify": {
    "transform": [["babelify", {"presets": ["es2015"]}]]
  }

更新

gulp.task('build', function () {
    gulp.src('./client/components/app.jsx')
        .pipe(browserify({
            extensions: ['.jsx'],
            debug: true,
            cache: {},
            packageCache: {},
            fullPaths: true
        }))
        .pipe(babelify({presets: ['es2015', 'react']}))
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./client/scripts/'))
});

我更改了gulp任务，但现在我得到了错误：

Browserify Error [TypeError: Invalid non-string/buffer chunk]

Answer 1

您目前还没有将jsx转换成正常的Javascript。

在您的Browserify配置中，您应该有一个react预置来实现这一点。对你来说，这将是：

"browserify": {
    "transform": [["babelify", {"presets": ["es2015", "react"]}]]
}

您还需要安装此预置。npm install babel-preset-react

关于预置的更多信息

关于反应预置的更多信息

Answer 2

我得到了同样的错误，在我的例子中升级节点刚刚解决了这个问题。