ES6 transpiler + browserify + gulp

Question

我正嘗試創建一個從ES6模塊transpile（使用CJS）生成代碼的gulp任務，並使用browserify將其轉換爲單個文件。我有以下代碼： -

var gulp = require('gulp'); 

var browserify = require('gulp-browserify'); 
var es6transpiler = require('gulp-es6-module-transpiler'); 
var rjs = require('gulp-requirejs'); 


gulp.task('jscompile', function() { 
    gulp.src('./app/scripts/**/*.js') 
     .pipe(es6transpiler({ 
       type : "cjs" 
      })) 
     .pipe(gulp.dest('./dist')) 
     .pipe(browserify(
      './dist/app.js' 
     )) 
     .pipe('dist'); 
}); 

不過，我不斷收到以下錯誤： -

C:\dev\temp\angulargulp>gulp jscompile 
[gulp] Using gulpfile C:\dev\temp\angulargulp\gulpfile.js 
[gulp] Starting 'jscompile'... 
[gulp] 'jscompile' errored after 5.48 ms Object dist has no method 'on' 

C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\index.js:39 
    if (xopts) Object.keys(xopts).forEach(function (key) { 
        ^
TypeError: Object.keys called on non-object 
    at Function.keys (native) 
    at module.exports (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\index.js:39:23) 
    at Transform.transform [as _transform] (C:\dev\temp\angulargulp\node_modules\gulp-browserify\index.js:91:19) 
    at Transform._read (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10) 
    at Transform._write (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:12) 
    at doWrite (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:237:10) 
    at writeOrBuffer (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:227:5) 
    at Transform.Writable.write (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\through2\node_modules\readable-stream\lib\_stream_writable.js:194:11) 
    at DestroyableTransform.ondata (stream.js:51:26) 
    at DestroyableTransform.EventEmitter.emit (events.js:95:17) 

我是新來CommonJS的，節點和咕嘟咕嘟，所以道歉，如果這是一個愚蠢的問題。

謝謝。

編輯 我有以下文件： - 應用程序/腳本/ MyController.js

var MyController = function($scope, MyService, $http) { 
    $scope.doSomething = function() { 
     console.log("Yo"); 
    } 
} 

export default MyControllerDef = [ "$scope", "MyService", "$http", MyController ]; 

應用程序/腳本/ app.js

/*jshint unused: vars */ 

import MyControllerDef from 'MyController'; 
import GetBookingServiceDef from 'bookingsummary/services/GetBookingService'; 

angular.module("test") 
     .controller("MyController", MyControllerDef); 

angular.module("test") 
     .services("GetBookingService", GetBookingServiceDef); 

應用程序/腳本/服務/ GetBookingService.js

"use strict"; 

var GetBookingService = function($rootScope, $http) { 
    return { 
     retrieveBooking : function() { 
      return $http.get("/scripts/dummyValues/booking.js").then(function(inResponse) { 
       if (inResponse.data instanceof String) 
        return JSON.toJSON(inResponse.data); 
       return inResponse.data; 
      }); 
     }, 
     notifyBookingUpdates : function(data) { 
      $rootScope.$emit("bookingsummary.update", data); 
     }, 
     listenToBookingUpdates : function(bookingUpdateFn) { 
      $rootScope.$on("bookingsummary.update", function(e, data) { 
       bookingUpdateFn(data); 
      }); 
     } 
    }; 
}; 

export default GetBookingServiceDef = [ "$rootScope", "$http", GetBookingService ]; 

根據下面的反饋，我已經修改了我一口腳本： -

var gulp = require('gulp'); 

var browserify = require('gulp-browserify'); 
var es6transpiler = require('gulp-es6-module-transpiler'); 

gulp.task('jscompile', function() { 
    return gulp.src('./app/scripts/**/*.js') 
     .pipe(es6transpiler({ 
       type : "cjs" 
      })) 
     .pipe(gulp.dest('./dist')) 
     .pipe(browserify()) 
     .pipe('./dist/finalapp.js'); 
}); 

這已經修改了錯誤的： -

C:\dev\temp\angulargulp>gulp jscompile 
[gulp] Using gulpfile C:\dev\temp\angulargulp\gulpfile.js 
[gulp] Starting 'jscompile'... 
[gulp] 'jscompile' errored after 5.24 ms Object ./dist/finalapp.js has no method 'on' 

events.js:72 
     throw er; // Unhandled 'error' event 
      ^
Error: module "MyController" not found from "C:\\dev\\temp\\angulargulp\\dist\\fake_da0c6a27.js" 
    at notFound (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\index.js:803:15) 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\index.js:754:23 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\browser-resolve\index.js:185:24 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:44:14 
    at process (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:113:43) 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:122:21 
    at load (C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:54:43) 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:60:22 
    at C:\dev\temp\angulargulp\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:16:47 
    at Object.oncomplete (fs.js:107:15) 

Answer 1

使用方法如下：

.pipe(browserify()) 
    .pipe(gulp.dest('./dist/app.js')); 

注那browserify插件需要一個對象{}作爲選項。不是作爲目的地的字符串。請查看gulp-browserify plugin瞭解如何使用它。