ES6 transpiler + browserify + gulp [英] ES6 transpiler + browserify + gulp
本文介绍了ES6 transpiler + browserify + gulp的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建一个从ES6模块转储（使用CJS）生成代码的吞噬任务，并使用browserify将其转换为单个文件。我有以下代码： - $ / $>
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)
我是CommonJS，Node和Gulp的新手，所以如果这是一个愚蠢的问题，表示歉意。
I am new to CommonJS, Node and Gulp, so apologies if this is a stupid question.
谢谢。
编辑
我有以下文件： -
app / scripts / MyController.js
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
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
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脚本： -
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)
推荐答案
使用它就像这样：
Use it like this:
.pipe(browserify())
.pipe(gulp.dest('./dist/app.js'));
请注意， browserify 插件需要一个对象 {} 作为选项。不是作为目的地的字符串。请查看 gulp-browserify插件了解如何使用它。
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.
这篇关于ES6 transpiler + browserify + gulp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
