Gulp + Browserify + Babelify 意外令牌

Question

我使用 Gulp 使用 Browserify 和 Babelify 转换 jsx/es6，但我收到错误：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;

古尔普文件.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()
});

在我的包.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

我遇到了同样的错误，在我的情况下，升级节点只是解决了问题。