错误 - HTML解析错误

Question

所以我得到了这个非常简单的任务，一饮而尽：

var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var browserify = require('browserify'); 

gulp.task('browserify', function() { 
    return browserify({ entries: ['main.js'] }) 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('dist')); 
}); 

gulp.task('default', ['browserify']); 

这应该只是browserify我main.js到bundle.js，然后将其存储在一个文件夹dist。 问题是，似乎一饮而尽犯规喜欢解析HTML时，因为我得到这个错误：

events.js:85 throw er; // Unhandled 'error' event ^Error: Parsing file C:\Dev\react_wkspc\main.js: Unexpected token (5:2)

我main.js也很简单：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

ReactDOM.render(
    <h1>First test of react!</h1>, 
    document.getElementById('container'); 
); 

和错误似乎来自这条线<h1>First test of react!</h1>,是，我认为，要使用正确的方式作出反应，因为它是相同的脚本为the official React doc

我也试图与babelify这个脚本：

var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var babelify = require('babelify'); 
var browserify = require('browserify'); 

gulp.task('browserify', function() { 
    browserify({ 
    entries: 'main.js', 
    extensions: ['.js'], 
    debug: true 
    }) 
    .transform(babelify) 
    .bundle() 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('default', ['browserify']); 

，并得到了同样的错误从我可以读

SyntaxError: C:/Dev/react_wkspc/main.js: Unexpected token (5:2)

Answer 1

的缺少的步骤是

• 添加babelify
• 确保您还安装了这种正确的通天预置您的源可以正确解析。

这里是我的一个项目的例子，同时B是browserify

function bundleShare(b, output) { 
    return b 
    .transform(babelify.configure({ 
     presets: ["es2015", "react"] 
    })) 
    .bundle() 
    .pipe(source(output)) 
    .pipe(gulp.dest('./wwwroot/assets')); 
} 

在我的包JSON我有以下的开发依赖

“

babel-preset-es2015": "^6.3.13", 
"babel-preset-react": "^6.3.13", 
"babelify": "^7.2.0",