Как транспилировать код jsx при помощи gulp?

Question

[Gagatyn]

Gulpfile.js

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

gulp.task('babel', function() {
    return gulp.src('js/source/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('js/build'))
});

package.json -> devDependencies

{
    "@babel/core": "^7.0.0-beta.53",
    "@babel/preset-env": "^7.0.0-beta.53",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-browserify": "^0.5.1",
    "gulp-watch": "^5.0.0"
  }

A:\App>gulp babel
[13:24:03] Using gulpfile A:\App\gulpfile.js
[13:24:03] Starting 'babel'...

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: Plugin/Preset files are not allowed to export objects, only functions. In A:\App\node_modules\babel-preset-es2015\lib\index.js

Как транспилировать код? Ошибку выдает сверху. Подскажите пожалуйста рабочий task

Answer 1

[Никита Егоров]

Установите плагин babel-plugin-transform-react-jsx, а после подключите его.
npm i -D babel-plugin-transform-react-jsx

gulp.task('babel', function() {
    return gulp.src('js/source/**/*.js')
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(gulp.dest('js/build'))
});

Comments

[Gagatyn]

Это единственный рабочий вариант?

[Антон Спирин]

Gagatyn, советую познакомиться с прекрасным инструментом для сборки webpack.

[Gagatyn]

Антон Спирин, скажите пожалуйста в двух словах почему webpack?

[Антон Спирин]

Gagatyn,
gulp - таск менеджер
webpack - сборщик модулей

Во-первых это стандарт в react разработке. Во-вторых возможности очень гибкой настройки бандлинга. В-третьих HMR.

Answer 2

[Ilya]

Поставь вебпак и не парься с настройкой

Comments

[Gagatyn]

Ilya, убеди меня и я поставлю :)

[Ilya]

Настраивается куда проще, конфигурационный файл меньше, возможностей больше, популярнее

[Ilya]

Плюс галп по сути не обновляется очень давно уже, можно сказать умер

[Иван]

Ilya, wepback легко настраивается? Мне кажется слишком субъективно)

[Ilya]

Иван, ну если у вас вызывает затруднение прочитать документацию, в которой все достаточно понятно объяснено, то ничем помочь не могу

[Иван]

Ilya, вебпак огромен и имеет кучу настроек для любого случая жизни. А вы говорите легко настраивается.