我有一个 GULP 的任务文件，用于使用 babelify 使用 JSX 代码编译 js 文件，但无法正常工作

Question

我有一个 React 项目，我已经安装了 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

和gulp以及

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

非常感谢您的帮助！

Answer 1

您能否在 gulp 文件中进行以下更改

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

然后

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

然后运行 gulp.. 它应该工作

我有一个 GULP 的任务文件，用于使用 babelify 使用 JSX 代码编译 js 文件，但无法正常工作

I have a task file of GULP for compile js file with JSX code using babelify, but not work it

javascript

jsx

reactjs

gulp

babelify