0

我想要完成的事情

我正在尝试使用 ES6 或至少使用模块模式使客户端的 Javascript 代码面向对象。

我意识到这意味着它需要转译，并且因为我已经在使用 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/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');
    }
}

概括

我正在尝试的似乎不起作用。我得到一个缩小的 js 文件public/app.js，其中包含似乎是requirees5 的解决方法，但其中不包含任何实际代码。（我对文件中的单词test进行了搜索，以确定是否将console.log其放入文件中）

附加信息

gulpfile.js 变量：

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');
4

0 回答 0