ES6 转译器 + browserify + gulp

Question

我正在尝试创建一个 gulp 任务，该任务采用从 ES6 模块转译（使用 CJS）生成的代码，并使用 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、Node 和 Gulp 的新手，如果这是一个愚蠢的问题，我深表歉意。

谢谢。

编辑 我有以下文件：- 应用程序/脚本/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 ];

根据下面的反馈，我修改了我的 gulp 脚本：-

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 了解如何使用它。