Webpackがgulp-babelでニースを再生していません

Question

私はES2015コードを処理するためにgulpスクリプトを作成していますが、最終的には反応しますが、単純に機能しません。 Uglifyはエラーを投げていた。 （stream.js：74 throw er; //パイプに未処理のストリームエラーがあります）ビルドを見たら、ES2015コードが変換されていないことが明らかでした。

この問題のほとんどの解決策には、プリセットがありません。 babel-preset-es2015を必ず含めるようにしました。

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

をマイ `gulpfile.babel.jsはそれなしで実行されません：私は読み.babelrcファイルを持っています。

私はプロセスにしようとしているファイルは非常に単純です：それは早期のJavaScriptになっています

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

は、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/')) 
}) 

マイ一気のバージョンは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" 
    } 

UPDATE：だから私は行って作成しましたバベルのためにちょうど別の仕事とそれは動作します。私がuglifyに追加して名前を変更すると動作しますが、Webpackを追加すると問題があります。明らかに、Webpackはうまくいきません。他の誰かがWebpackとgulpでこの種の問題を抱えていましたか？

Answer 1

私はこれを聞かせてください、本当にgulp-babelでうまくいくためにはwebpackが必要ですか？私たちはwebpackがbabelとうまくやっていることを知っています。これまでに読んだことのあるもの全てから、webpackはgulpでうまくいきません。 Webpackプラグインには、非常に奇妙なことが起こっています。 Webpackとgulpを一緒に使用するために私が今までに見つけた最良のリソースはhereです。

これまでのところ私のアドバイスは、webpackとgulpをうまくやってみるのを忘れてしまいました。代わりに、jsに変更があったときにwebpackを実行してください。ここに私の設定です：私のpackage.jsonで

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] ... 

私は一口で今の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" 
    }, 

を実行するために、クロスENVを使用してスクリプトを設定し、ここでphase2technologyからの提案につきとしての私の仕事です。 COM：

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

本当に私はここでキーがちょうどWebPACKのバンドルを行うと、タスクを実行するためにがぶ飲みを使用できるようにすることだと思います。