Отсутствует код с использованием gulp, babel и uglify
Чего я пытаюсь достичь
Я пытаюсь, чтобы мой Javascript-код на стороне клиента был объектно-ориентированным, используя ES6 или, по крайней мере, используя шаблон модуля.
Я понимаю, что это означает, что его нужно будет переносить, и, поскольку я уже использую gulp для других задач, я пытаюсь заставить Gulp автоматизировать перенос для меня.
отказ
Я даже не то, что я пытаюсь сделать, возможно даже то, как я это делаю, так что не стесняйтесь сказать мне, что это невозможно.
Файл глотка
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);
});
где config.js.src = src/js/app.js
а также 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 / стол /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');
}
}
Резюме
То, что я пытаюсь, похоже, не работает. Я получаю уменьшенный файл js public/app.js
который содержит то, что кажется require
Обходной путь для ES5, но не содержит никакого реального кода там. (Я выполнил поиск по слову test в файле, чтобы console.log
сделал это в файл)
Дополнительная информация
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');