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 文件有 div 和 ID 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 header.

的行上

可能是什么问题？

Answer 1

您使用的 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",
    ...
  }
}

JSX 上的 babelify 转换导致 React 元素失败

babelify transformation on JSX for React element failing

react-jsx

babeljs