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

我试图transpile的代码是这样的：咕嘟咕嘟+ browserify + babelify： “意外令牌” 的JSX代码

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)

来源

2016-09-12 files___

包装是否在括号中<li> HEL P +

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'));

来源

2016-09-12 16:08:18

不！：[给我同样的错误！ –

如果我在不使用JSX的情况下使用JavaScript代码编写相同的代码，gulp不会给我任何错误。只有使用JSX吞咽给我错误。 –

啊，我想象你的babelify没有正确配置以支持反应语法。我不是babelify的专家，所以我不知道如何最好地解决这个问题，对不起 –

从babelify docs：

As of Babel 6.0.0 there are no plugins included by default. For babelify to be useful, you must also include some presets and/or 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/')); 
});

来源

2016-09-12 17:49:10

非常感谢，它为我工作。 – user3181365

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

回答

相关问题