웹팩이 꿀꺽 꿀꺽 마시고 놀고 있지 않습니다.

Question

저는 ES2015 코드를 처리하기 위해 꿀꺽 꿀꺽 마는 스크립트를 만들겠습니다.하지만 결국에는 반응이 있지만 작동하지 않습니다. Uglify가 오류를 던지고있었습니다. (stream.js : 74 throw er; // 파이프에서 처리되지 않은 스트림 오류가 발생했습니다.) 빌드를 살펴보면 ES2015 코드가 변환되지 않았 음이 분명했습니다.

이 문제에 대한 대부분의 해결책은 누락 된 사전 설정에 관한 것입니다. babel-preset-es2015을 반드시 포함 시켰습니다.

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

내`gulpfile.babel.js가없이 실행되지 않습니다 : 내가 읽는 .babelrc 파일이 있습니다.

내가 프로세스에 노력하고있어 파일은 매우 간단합니다 : 그것은 초기 자바 스크립트로 켜져

// 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 : 그래서 내가 가서 만든 Babel을위한 별도의 작업만으로 작동합니다. uglify에 추가하고 이름을 변경하면 작동하지만 Webpack을 추가하면 문제가 발생합니다. 분명히, Webpack 좋은 연주되지 않습니다. 다른 사람이 Webpack과 gulp를 사용하는 데 어려움을 겪고 있습니까?

Answer 1

내가 물어 보자. 너는 gulp-babel과 잘 어울리는 webpack이 필요한가요? 우리는 webpack이 babel과 잘 작동한다는 것을 알고 있습니다. 일반적으로 지금까지 읽은 모든 것에서 webpack은 gulp와 잘 맞지 않습니다. 웹팩 플러그인으로는 아주 이상한 일이 일어나고 있습니다. 내가 지금까지 웹팩과 꿀풀을 함께 얻으려고 찾은 최고의 자원은 here입니다.

내 충고는 지금까지 웹 팩과 꿀꺽 꿀꺽 마시고 함께 놀고 싶지 않은 것을 잊지 마십시오. 대신, 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] ... 

내가 꿀꺽 지금 웹팩

"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이 묶음을 사용하고 꿀꺽 꿀꺽 거리며 작업을 실행하도록하는 것입니다.