Gulp + Browserify + TypeScript 到浏览器

Question

我的问题如下：

我使用 gulp+browserify 将我的 TypeScript 编译为可以在普通 HTML 页面上使用的 JavaScript，问题是我的类在浏览器上永远不可用：

VM633:1 Uncaught ReferenceError: Test is not defined
    at <anonymous>:1:13

这是我的打字稿文件：

VM633:1 Uncaught ReferenceError: Test is not defined
    at <anonymous>:1:13

这是我的 gulpfile

class Test {
        public test(): void {
            console.log("aa");
        }
}

该文件编译没有问题，并包含在我的 index.html（编译后的 js 文件）中。

但是当我尝试：

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");

gulp.task("default", function () {
    return browserify({
        //basedir: '.',
        debug: true,
        entries: ['app/Resources/typescript/Test.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("web/bundles/framework/js"));
});

我收到以下错误：

VM633:1 Uncaught ReferenceError: Test is not defined
    at <anonymous>:1:13

我无法解决它，我已经阅读了很多，但没有找到任何明确的内容，我尝试了所有但没有任何效果。

Answer 1

这里缺少一些东西：

如果你希望你的类可以在模块之外访问，你必须export这样做：

export class Test {
    // ...
}

Browserify 在您定义的类之上创建函数。因此它无法在全球范围内访问（这是一件好事）。通常您会将其导入到另一个文件中并使用它：

// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well
import {Test} from "test";
var t = new Test();
console.log(t);

或者，如果确实希望它可以全局访问，您可以将其附加到window对象：

// 在 Test.ts 文件中：

(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.