Gulp + browserify + babelify：JSX 代码的“意外令牌”

Question

我尝试转译的代码是这样的：

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

var listOfItems = <ul>
                    <li className="item-1">Item 1</li>
                    <li className="item-2">Item 2</li>
                    <li className="item-3">Item 3</li>
                  </ul>;

ReactDOM.render(listOfItems, document.getElementById('react-application'));

gulpfile.js 看起来像这样：

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('snapterest.js'))
    .pipe(gulp.dest('./build/'));
});

但是如果我尝试启动gulp，它会给我这个错误：

[18:00:34] Using gulpfile ~/Documents/Esercitazioni/react/reactjs-essentials/snapterest/gulpfile.js
[18:00:34] Starting 'default'...
events.js:141
      throw er; // Unhandled 'error' event
      ^

SyntaxError: /Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/source/app.js: Unexpected token (4:18)
  2 | var ReactDOM = require('react-dom');
  3 | 
> 4 | var listOfItems = <ul>
    |                   ^
  5 |                     <li className="item-1">Item 1</li>
  6 |                     <li className="item-2">Item 2</li>
  7 |                     <li className="item-3">Item 3</li>
    at Parser.pp.raise (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:512:12)
    at Parser.pp.parseExprSubscripts (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:270:19)
    at Parser.pp.parseMaybeUnary (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:250:19)
    at Parser.pp.parseExprOps (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:180:19)
    at Parser.pp.parseMaybeConditional (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:157:19)
    at Parser.pp.parseMaybeAssign (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseVar (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:585:24)
    at Parser.pp.parseVarStatement (/Users/macbookpro/Documents/Esercitazioni/react/reactjs-essentials/snapterest/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:416:8)

Answer 1

来自babelify docs：

截至Babel 6.0.0，默认情况下不包含任何插件。要使 babelify 有用，您还必须包含一些 presets 和/或 plugins。

在您的情况下，这意味着您需要 babel-preset-es2015 和 babel-preset-react：

$ npm install --save-dev babel-preset-es2015 babel-preset-react

然后你需要告诉babelify 使用它们：

gulp.task('default', function () {
  return browserify('./source/app.js')
    .transform(babelify.configure({presets: ['es2015','react']}))
    .bundle()
    .pipe(source('snapterest.js'))
    .pipe(gulp.dest('./build/'));
});

Answer 2

用括号包裹<li> 有帮助吗？

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

var listOfItems = (
              <ul>
                <li className="item-1">Item 1</li>
                <li className="item-2">Item 2</li>
                <li className="item-3">Item 3</li>
              </ul>
    );

ReactDOM.render(listOfItems, document.getElementById('react-application'));