0

What I'm trying to accomplish

I'm trying to get my Javascript code on the client side to be Object-Oriented using ES6 or at least using the module pattern.

I realize that this means that it's going to need transpiled and because I'm already using gulp for other tasks, I'm trying to get Gulp to automate the transpiling for me.

Disclaimer

I'm not even what I'm trying to do is even possible the way I'm doing it so feel free to tell me that it's not possible.

The Gulp File

gulp.task('client', function(callback) {
    pump([
        browserify({ entries: config.js.src, debug: true })
            .transform("babelify", { presets: ["es2015"] })
            .bundle(),
        source('app.js'),
        buffer(),
        uglify(),
        gulp.dest(config.js.dest),
        livereload()
    ], callback);
});

where config.js.src = src/js/app.js and config.js.dest = public/js

src/js/app.js

import {Rest} from './table/Rest';

class App {

    static table() {
        let rest = new Rest();
        rest.test();
        rest.testJQuery();
    }

}

App.table();

src/js/table/Rest.js

import * as $ from 'jquery';

export class Rest {

    private baseUri;

    constructor(baseUri) {
        this.baseUri = baseUri;
    }

    test() {
        console.log("Testing worked...");
    }

    testJQuery() {
        $('div').addClass('red');
    }
}

Summary

What I'm trying doesn't seem to work. I get a minified js file public/app.js that contains what appears to be the require workaround for es5 but doesn't contain any of the actual code in there. (I did a search on the word test in the file to if the console.log made it out to the file)

Additional Information

gulpfile.js vars:

var gulp = require('gulp');
var pump = require('pump');

var browserify = require('browserify');
var watchify = require('watchify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');
var ts = require('gulp-typescript');
var sass = require('gulp-sass');
Jared Smith
  • 19,721
  • 5
  • 45
  • 83
Jujunol
  • 457
  • 5
  • 18
  • 1
    I edited the question title to reflect the actual issue. In the future please be *specific* in your question title: gulp/babel/uglify makes it pretty clear its client side, and your problem has nothing to do with object orientation. – Jared Smith Feb 13 '17 at 16:32
  • I suppose, I was stating the end goal in the title because I was thinking about it more from an SEO perspective given what I was trying to search for. Regardless, thank you for your input – Jujunol Feb 13 '17 at 16:39

0 Answers0