Webpack 与 gulp-babel 的配合不佳

Question

我正在构建一个 gulp 脚本来处理我的 ES2015 代码，最终用 React，但它根本无法工作。 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 时遇到过这种麻烦？

Answer 1

我问一下，你真的需要 webpack 才能和 gulp-babel 一起玩吗？我们知道 webpack 与 babel 配合得很好，而且从我目前阅读的所有内容来看，webpack 与 gulp 配合得不好。任何 webpack 插件都会发生很多奇怪的事情。到目前为止，我找到的让 webpack 和 gulp 协同工作的最佳资源是 here.

到目前为止我的建议是，忘记尝试让 webpack 和 gulp 一起玩得很好。相反，当您对 js 进行更改时，只需使用 gulp 运行 webpack。这是我的设置：

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"
  },

现在 gulp，根据 phase2technology.com 的建议，这是我的任务：

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

真的，我认为这里的关键是让 webpack 进行捆绑并使用 gulp 到运行任务。

Webpack 与 gulp-babel 的配合不佳

Webpack is Not Playing Nice with gulp-babel

javascript

gulp

webpack

babeljs

gulp-babel