錯誤 - 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",