ES6 transpiler + browserify + gulp

问题

I am trying to create a gulp task that takes code generated from the ES6 module transpile (using CJS), and use browserify to turn that into a single file. I have the following code:-

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');
});

However, I keep getting the following error:-

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)

I am new to CommonJS, Node and Gulp, so apologies if this is a stupid question.

Thanks.

EDIT I have the following files:- app/scripts/MyController.js

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

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

app/scripts/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);

app/scripts/services/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 ];

Based on feedback below, I have modified my gulp script:-

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');
});

This has modified the error to this:-

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)

回答1:

Use it like this:

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

Note that browserify plugin takes an object {} as options. not a string as destination. Check out the gulp-browserify plugin for how to use it.

来源：https://stackoverflow.com/questions/25697306/es6-transpiler-browserify-gulp