对JSX进行babelify转换以使React元素失败

时间:2015-12-06 06:58:12

标签: babeljs react-jsx

我是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文件的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标头的行上。

可能是什么问题?

1 个答案:

答案 0 :(得分:4)

您使用的babel版本是什么?

从Babel 6开始,您需要手动声明预设,请检查this

基本上,在项目的根目录中,您需要.babelrc,其中包含以下内容:

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

package.json中相应的npm模块:

// package.json

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