51804

ES6 transpiler + browserify + gulp

Question:

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.

<strong>EDIT</strong> 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)

Answer1:

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 <a href="https://github.com/deepak1556/gulp-browserify" rel="nofollow">gulp-browserify plugin</a> for how to use it.

Recommend

  • Configure Apache to recover from mod_python errors
  • Conditional font color R Markdown
  • Can't display images from localhost
  • jQuery file download plugin
  • Can one add a complex type item to ListModel?
  • Understanding Intl.DateTimeFormat as a JavaScript object
  • JSON Error when parsing “… has no method 'replace'”
  • UML diagram generator in Visual Studio 2010
  • Embedded Glassfish JPA Datasource connection fail
  • Extract All Possible Paths from Expression-Tree and evaluate them to hold TRUE
  • XSLT foreach repeating nodes to flat
  • List images(01.png) and descriptions(01.txt) from directory
  • Array with custom indexes in Ionic2
  • Custom Tabgroup Appcelerator
  • D3 nodes and links from JSON with nested arrays of children
  • why do I get the error when installing the gem 'pg'? [duplicate]
  • Why value captured by reference in lambda is broken? [duplicate]
  • Check if a string to interpolate provides expected placeholders
  • Javascript + PHP Encryption with pidCrypt
  • When should I choose bucket sort over other sorting algorithms?
  • Hazelcast - OperationTimeoutException
  • To display the title for the current loaction in map in iphone
  • Why winpcap requires both .lib and .dll to run?
  • Akka Routing: Reply's send to router ends up as dead letters
  • AT Commands to Send SMS not working in Windows 8.1
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to set the response of a form post action to a iframe source?
  • Why joiner is not used after Sequence generator or Update statergy
  • How do I configure my settings file to work with unit tests?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • Is it possible to post an object from jquery to bottle.py?
  • unknown Exception android
  • Recursive/Hierarchical Query Using Postgres
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?