Gulp-Babel Грешка при анализиране на JSX

Нов съм в използването на gulp и babel заедно. Създадох задача за изграждане (опростена версия по-долу):

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('build', () => {
  return gulp.src('src/components/App.jsx')
    .pipe(babel())
    .pipe(gulp.dest('build'))
});

Моят файл src/components/App.jsx изглежда така:

/** @jsx React.DOM */

import React, {Component} from 'react';

class App extends Component {
  render() {
    return <div>Example</div>
  }
}

export default App;

Грешката, която получавам е:

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/user/src/components/app.jsx: Unexpected token (8:6)
   6 |   render: () => {
   7 |     return (
>  8 |       <div>Test</div>
     |       ^
   9 |     )
  10 |   }
  11 | });
    at Parser.pp.raise (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:514:12)
    at Parser.pp.parseExprSubscripts (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:267:19)
    at Parser.pp.parseMaybeUnary (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:247:19)
    at Parser.pp.parseExprOps (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:178:19)
    at Parser.pp.parseMaybeConditional (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:160:19)
    at Parser.pp.parseMaybeAssign (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:123:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:566:26)
    at Parser.pp.parseExprAtom (/Users/user/node_modules/gulp-babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:471:19)

Сигурно правя нещо нередно, но не съм сигурен какво е то. Някакви идеи?


reactjs babeljs gulp
person Daniel Timberlake    schedule 07.11.2015    source източник

Отговори (1)


arrow_upward
9
arrow_downward

Babel, започвайки с версия 6, не прави нищо по подразбиране и трябва да предоставите набор от трансформатори, които да бъдат приложени към изходния код.

Във вашия случай искате както react, така и es2015 предварително зададени трансформаторни настройки:

.pipe(babel({
    presets: ['react', 'es2015']
}))

Допълнителни детайли:

person zerkms    schedule 07.11.2015
comment
Можете ли да добавите своя файл package.json също за тази трансформация. - person Jitendra Pancholi; 12.09.2019
comment
@JitendraPancholi беше преди 4 години o_O - person zerkms; 12.09.2019
comment
Да... опитвам се да трансформирам jsx в js чрез gulp, но срещам проблеми. Следях stackoverflow.com/a/36991417/1425210, но поради най-новите версии дава грешка. - person Jitendra Pancholi; 12.09.2019