Как подружить GULP 4 + Webpack + React JS?

Question

[Игорь Пушкарский]

Всем привет!

В общем такая проблема пытаюсь настроить GULP для работы с WebPack и React js, но при первом запуске все отлично, но стоит поменять какой то файл js или jsx то все то отваливаются

Uncaught SyntaxError: Unexpected token import

то говорит что

Uncaught Invariant Violation: There is no registered component for the tag div

.

Сам веб пак, через 5 раз реагирует на изменения в файлах, непонятно как победить.

Пересмотрел все видео от Ильи Кантора https://www.youtube.com/playlist?list=PLDyvV36pndZ... и https://www.youtube.com/playlist?list=PLDyvV36pndZ...

Поковырял исходники https://github.com/iliakan/gulp-screencast/blob/ma... и вот тут https://github.com/iliakan/gulp-screencast/blob/ma... но ничего дельного не происходит вся та же проблема.

Кому не жалко поделитесь конфигом который действительно работает ?

Код https://jsfiddle.net/j59f9ebv/

// Дефолтный шаблон, подлежит модификации под проект

import gulp from 'gulp';
import jade from 'gulp-jade';
import stylus from 'gulp-stylus';
// import csso from 'gulp-csso';
// import concat from 'gulp-concat';
import autoprefixer from 'gulp-autoprefixer';
import bs from 'browser-sync';
import debug from 'gulp-debug';
import sourcemaps from 'gulp-sourcemaps';
import del from 'del';
import sb2 from 'stream-combiner2';
import notify from 'gulp-notify';
import typograf from 'gulp-typograf';
// import babel from 'gulp-babel';
import wd from 'wiredep';
import csscomb from 'gulp-csscomb';
import useref from 'gulp-useref';
import webpack from 'webpack';
//import named from 'vinyl-named';
import gulplog from 'gulplog';
//const webpack = webpackStream.webpack;

const wpConfig  = {
  output: {
    path:  "/public",
    filename: "[name].js"
  },
  watch: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/g,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

const combiner = sb2.obj;
const wiredep = wd.stream;

const typografConfig = {
  lang: 'ru',
  mode: 'digit',
  disable: ['ru/optalign/*'],
  enable: ['ru/nbsp/*'] };

// Styles
gulp.task('styles', () => combiner(
  gulp.src('src/styles/main.styl'),
  debug({ title: 'styles' }),
  sourcemaps.init(),
  debug({ title: 'stylus' }),
  stylus(),
  debug({ title: 'autoprefixer' }),
  autoprefixer({ browsers: ['last 15 versions'], cascade: false }),
  csscomb(),
  sourcemaps.write(),
  gulp.dest('public/styles/')
).on('error', notify.onError()));

// Jade
gulp.task('jade', () => combiner(
  gulp.src(['src/template/*.jade', '!src/template/_*.jade']),
  debug({ title: 'jade' }),
  jade({ pretty: true }),
  typograf(typografConfig),
  useref({ searchPath: ['app', '.'] }),
  gulp.dest('public')
).on('error', notify.onError()));

// Assets
gulp.task('assets', () => combiner(
  gulp.src('src/assets/**/*.*', { since: gulp.lastRun('assets') }),
  debug({ title: 'assets' }),
  gulp.dest('public')
).on('error', notify.onError()));

// Webpack
gulp.task('webpack', function(callback) {

  let options = {
    entry:   {
      main: './src/scripts/main',
    },
    output:  {
      path: './public/scripts/',
      filename: '[name].js'
    },
    watch: true,
    devtool: 'cheap-module-inline-source-map',
    module: {
      loaders: [
        {
          test: /\.jsx?$/g,
          loader: 'babel',
          query: {
            presets: ['react','es2015']
          }
        }
      ]
    },
    plugins: [
      new webpack.NoErrorsPlugin() // otherwise error still gives a file
    ]
  };


  webpack(options, function(err, stats) {

   /* if (!err) {
      err = stats.toJson().errors[0];
    }*/

    /*if (err) {
      notify.onError(err);
      gulplog.error(err);

    } else {
      gulplog.info(stats.toString({
        colors: true
      }));
    }*/

    if (!options.watch && err) {
      callback(err);
    } else {
      callback();
    }

  });

});

// Watch
gulp.task('watch', () => {
  gulp.watch('src/styles/**/*.styl', gulp.series('styles'));
  gulp.watch('src/template/**/*.jade', gulp.series('jade'));
  //gulp.watch(['src/scripts/**/*.js', 'src/scripts/**/*.jsx'], gulp.series('scripts'));
  gulp.watch('src/assets/**/*.*', gulp.series('assets'));
  gulp.watch('bower.json', gulp.series('wiredep'));
});

// Clean
gulp.task('clean', (callback) => {
  del('public');
  return callback();
});

// Build
gulp.task('build', gulp.series(
  gulp.parallel('styles', 'jade', 'assets')
));

// Serve
gulp.task('serve', () => {
  bs.init({ server: 'public' });
  bs.watch('public/**/*.*').on('change', bs.reload);
});

// Wiredep
gulp.task('wiredep', (callback) => {
  gulp.src('src/template/_layout.jade')
    .pipe(wiredep({ ignorePath: /^(\.\.\/)*\.\./ }))
    .pipe(gulp.dest('src/template'));
  callback();
});

// Start
gulp.task('start', gulp.series(
  'build',
  gulp.parallel('watch', 'serve')
));

Answer 1

[Вячеслав Лебедев]

Я подружил, держи:
https://github.com/slavikse/martyr/blob/master/.ma...
React подключай в .babelrc пресетах
https://github.com/slavikse/martyr/blob/master/.babelrc
Один нюанс, за скриптами следит сам webpack в gulp не нужно прописывать слушателя.

Comments

[Игорь Пушкарский]

У меня вроде бы тоже самое, но почему то работает через раз. Сейчас плпробую склонировать и поместить :)

[Игорь Пушкарский]

Протестировать *

[Игорь Пушкарский]

Протестировать *

Answer 2

[Игорь Пушкарский]

Вся проблема была неверном конфиге, как оказалось чем короче тем лучше :)

Рабочий конфиг, только настройки webpack

import named from 'vinyl-named';
import webpackStream from 'webpack-stream';

const webpack = webpackStream.webpack;
const webpackConfig  = {
  output:  {
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        loader: 'babel'
      }
    ]
  },
  watch: !production,
  plugins: [
    new webpack.NoErrorsPlugin()
  ],
  devtool: production ? null : 'cheap-inline-module-source-map'
};
const production = process.env.NODE_ENV === 'production';

// Webpack
gulp.task('webpack', (cb) => {

  let firstBuildReady = false;
  const done = (err) => {
    firstBuildReady = true;
    if (err) {
      return null;
    }
  };

  if (production) {
    webpackConfig.plugins.push(
      new webpack.optimize.UglifyJsPlugin()
    )
  }

  return combiner(
    gulp.src('src/scripts/main.js'),
    debug({ title: 'webpack' }),
    named(),
    webpackStream( webpackConfig, null, done ),
    gulp.dest('public/scripts/')
      .on('data', () => {
        if (firstBuildReady) {
          cb();
        }
      })
  );

});