0

我有一个带有反应的项目，我已经安装了 babelify，还有 gulp，当我使用 gulp 命令时，它可以完美运行并生成我的输出文件，但是如果我将 JSX 代码添加到我的 app.js 文件中，向我发送以下错误：

> events.js:160
>> throw er; // Unhandled 'error'
> SyntaxError C:/xxxxx/xxxxx/xxxx/myProject/source/app.js: Unexpected token (4:18)

好像我没有安装 babelify，但是已经用 npm 安装了

npm install --save-dev babelify

并吞下

npm install --global gulp

我的 app.js 文件有以下代码：

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

var listOfItems = <ul className="list-of-items">
 <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'));

我的 gulp 文件是下一个...

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

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

非常感谢您的帮助！

4

1 回答 1

1

您可以在 gulp 文件中进行以下更改吗

.transform(babelify, {presets: ["es2015", "react"]})

然后

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

然后运行 ​​gulp .. 它应该可以工作

于 2017-08-24T05:20:04.580 回答