Question

我想要完成的事情

我试图让客户端的Javascript代码使用ES6进行面向对象，或者至少使用模块模式。

我意识到这意味着它需要转换，并且因为我已经在使用gulp进行其他任务，所以我试图让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，其中包含es5的require解决方法，但不包含任何实际代码。（我在文件中搜索 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');

使用gulp，babel和uglify丢失代码

0 个答案: