JSX上的babelify转换以使React元素失败

Question

我是React.js的新手，并尝试了一些示例。我的js文件中包含以下代码：

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

var header = <h1>Test</h1>   
ReactDOM.render(header, document.getElementById('react-application'));

我的index.html文件的id为div react-application。

gulpfile的内容为：

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

gulp.task('default', function(){
       return browserify('./source/app.js')
            .transform(babelify)
            .bundle()
            .pipe(source('test.js'))
            .pipe(gulp.dest('./build/'));
      });

当我运行“ gulp”时，出现以下错误：

e:/react/test/source/app.js: Unexpected token (4:13)
[0m  2 | [36mvar[39m ReactDOM [1m=[22m require[94m[1m([22m[39m[31m'react-dom'[39m[94m[1m)[22m[39m[1m;[22m
  3 |
> 4 | [36mvar[39m header [1m=[22m [1m<[22mh1[1m>[22mTest[1m<[22m[1m/[22mh1[1m>[22m
    |              ^
  5 |
  6 | ReactDOM[1m.[22mrender[94m[1m([22m[39mheader[1m,[22m document[1m.[22mgetElementById[94m[1m([22m[39m[31m'react-application'[39m[94m[1m)[22m[39m[94m[1m)[22m[39m[1m;[22m[0m......

相同的代码可在babeljs上正确呈现。错误出现在将html分配给var标头的行上。

可能是什么问题呢？

Answer 1

您正在使用的Babel版本是什么？

从Babel 6开始，您需要手动声明预设，请选中此项。

基本上，在项目的根目录中，您需要.babelrc具有以下内容：

{
  "presets": [ "es2015", "react" ]
}

以及package.json中相应的npm模块：

// package.json

{
  "devDependencies": {
    ...
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    ...
  }
}