Webpack плохо работает с gulp-babel

Я создаю скрипт gulp для обработки моего кода ES2015, в конечном итоге с реакцией, но он просто не работает. Uglify выдавал ошибки. (stream.js:74 throw er; // Необработанная ошибка потока в канале.) Когда я посмотрел на сборку, стало очевидно, что код ES2015 не преобразуется.

Большинство решений этой проблемы касаются отсутствующего пресета. Я обязательно включил babel-preset-es2015. У меня есть файл .babelrc, который гласит:

{
   "presets": ["es2015", "react"]
}

Мой `gulpfile.babel.js не будет работать без него.

Файл, который я пытаюсь обработать, очень прост:

// index.js
let bobby = "bobby"
console.log(bobby + ' Drink rum.')

Когда он превратится в ранний JavaScript, let следует заменить на var. Может с моим gulpfile.babel.js что-то не так?

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import runSequence from 'run-sequence';
import babel from 'gulp-babel';

// load all gulp-* plugins in node_modules
const plugins = gulpLoadPlugins()

gulp.task('default', () => {
  runSequence('build', 'copy:index')
})

gulp.task('build', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel())
    .pipe(plugins.webpack())
    // .pipe(plugins.uglify())
    .pipe(plugins.rename('bundle.js'))
    .pipe(gulp.dest('dist/'))
})

gulp.task('copy:index', () => {
  gulp.src('src/index.html')
    .pipe(gulp.dest('dist/'))
})

Моя версия gulp — 3.9.1. Моя версия узла — 6.2.0.

Это мои зависимости до сих пор:

  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-register": "^6.16.3",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-filter": "^4.0.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "react": "^15.4.0-rc.4",
    "react-dom": "^15.4.0-rc.4",
    "run-sequence": "^1.2.2",
    "webpack": "^1.13.2"
  }

ОБНОВЛЕНИЕ: поэтому я создал отдельную задачу только для Babel, и она работает. Когда я добавил uglify и переименовал, он работает, но когда я добавляю Webpack, возникают проблемы. Очевидно, что Webpack играет не очень хорошо. У кого-нибудь еще были такие проблемы при работе с Webpack и gulp?


webpack javascript babeljs gulp gulp-babel
person Gabriel Kunkel    schedule 15.10.2016    source источник
comment
Это не решит вашу проблему, но с помощью этого простого gulpfile вы могли бы сбросить немного веса (если это имеет значение) и хлама (если вам не все равно) и немного времени (было бы интересно измерить), отбросив gulp-load-plugins и просто импортировать gulp-rename и gulp-webpack напрямую; и делать что-то вроде gulp.task('default', ['copy:index']) ...samebuildtask... gulp.task('copy:index', ['build'], ...samerestofcopyindex...   -  person henry    schedule 15.10.2016
comment
Спасибо. Я понимаю. Сейчас я в основном играю с этими разными инструментами.   -  person Gabriel Kunkel    schedule 15.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

Позвольте мне спросить, вам действительно нужен веб-пакет, чтобы хорошо работать с gulp-babel? Мы знаем, что webpack хорошо работает с babel, и вообще из всего, что я читал до сих пор, webpack плохо работает с gulp. С любым из плагинов webpack происходит так много странных вещей. Лучший ресурс, который я нашел для совместной работы webpack и gulp, — это здесь.

Мой совет до сих пор, забудьте о попытках заставить webpack и gulp хорошо играть вместе. Вместо этого просто запускайте веб-пакет gulp, когда у вас есть изменения в вашем js. Вот моя установка:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },

... [other webpack things] ...

В моем package.json я настроил скрипт, используя cross-env для запуска webpack.

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wp-dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "wp-build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

теперь в глотке, вот моя задача в соответствии с предложением от phase2technology.com:

gulp.task('webpack', (cb) => {
  exec('npm run wp-dev', function(err, stdout, stderr){
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

На самом деле я думаю, что ключ здесь в том, чтобы просто позволить веб-пакету выполнять связывание и использовать gulp для запуска задач.

person DimeZilla    schedule 31.05.2017