2016-09-15 3 views
2

gulp를 사용하여 내 react 프로젝트를 빌드하고 브라우저를 만들려고합니다.dest.write는 broswerify가있는 gulp의 함수가 아닙니다.

[16:19:54] Using gulpfile /var/www/html/new-webclass/gulpfile.js 
[16:19:54] Starting 'build'... 
[16:19:54] 'build' errored after 36 ms 
[16:19:54] TypeError: gulp.src(...).pipe(...).pipe is not a function 
    at Gulp.<anonymous> (/var/www/html/new-webclass/gulpfile.js:80:6) 
    at module.exports (/var/www/html/new-webclass/node_modules/orchestrator/lib/runTask.js:34:7) 
    at Gulp.Orchestrator._runTask (/var/www/html/new-webclass/node_modules/orchestrator/index.js:273:3) 
    at Gulp.Orchestrator._runStep (/var/www/html/new-webclass/node_modules/orchestrator/index.js:214:10) 
    at Gulp.Orchestrator.start (/var/www/html/new-webclass/node_modules/orchestrator/index.js:134:8) 
    at /usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:46:20 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 
    at Module.runMain (module.js:592:11) 
    at run (bootstrap_node.js:394:7) 
/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623 
    var written = dest.write(chunk); 
        ^

TypeError: dest.write is not a function 
    at write (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24) 
    at flow (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7) 
    at DestroyableTransform.pipeOnReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5) 
    at emitNone (events.js:86:13) 
    at DestroyableTransform.emit (events.js:185:7) 
    at emitReadable_ (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10) 
    at emitReadable (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5) 
    at readableAddChunk (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:187:9) 
    at DestroyableTransform.Readable.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:149:10) 
    at DestroyableTransform.Transform.push (/var/www/html/new-webclass/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_transform.js:145:32) 

TypeError: dest.write is not a function :하지만 번들을 구축하려고 할 때마다 나는이 오류가 발생합니다. 좋아, 이상해. 나는 해결책을 찾을 수 없다.

devDependencies": { 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "babelify": "^7.3.0", 
    "bootstrap-sass": "^3.3.7", 
    "browserify": "^13.1.0", 
    "gulp": "^3.9.1", 
    "gulp-autoprefixer": "^3.1.1", 
    "gulp-pug": "^3.0.4", 
    "gulp-sass": "^2.3.2", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "vinyl-buffer": "^1.0.0", 
    "vinyl-source-stream": "^1.1.0" 
    } 

우는 소리 내 gulpfile입니다

package.json (devDependencies 만은) 섹션을 필요로한다.

const gulp = require('gulp'); 
const sass = require('gulp-sass'); 
const autoprefixer = require('gulp-autoprefixer'); 
const pug = require('gulp-pug'); 
const browserify = require('browserify'); 
const babelify = require('babelify'); 
const source = require('vinyl-source-stream'); 
const buffer = require('vinyl-buffer'); 

여기 묶음으로하는 작업입니다.

gulp.task('build', function() { 
    return gulp.src('./react/index.jsx') 
    .pipe(browserify({ 
     extensions: ['.jsx'], 
     debug: true, 
     cache: {}, 
     packageCache: {}, 
     fullPaths: true 
    })) 
    .pipe(babelify.configure({ presets: ['es2015', 'react', 'stage-0'] })) 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe(gulp.dest('./public/react/')); 
}); 

번들을 사용하는 다른 방법이 있습니까? 무슨 일 이니?

답변

4

알아내는 데는 (사실 하루 종일) 시간이 걸렸습니다. 전체 구성이 잘못되었습니다.

gulp.task('build', function() { 
    return browserify({ 
     extensions: ['.jsx', '.js'], 
     debug: true, 
     cache: {}, 
     packageCache: {}, 
     fullPaths: true, 
     entries: './react/index.js', 
    }) 
    .transform(babelify.configure({ 
     presets: ['es2015', 'react', 'stage-0'], 
     ignore: /(bower_components)|(node_modules)/ 
    })) 
    .bundle() 
    .on("error", function (err) { console.log("Error : " + err.message); }) 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./public/react')); 
}); 

의 Src : Using React with ES6 and Browserify by wecodetheweb.com

이 바로 하나입니다
관련 문제