javascript - 浏览器中找不到静态函数

Question

我正在尝试让静态方法在浏览器中执行，但目前我无法让浏览器看到它们...

MyClass.ts

export class MyClass {

    public static myFunc(){
        // Do stuff here
    }

}

ma​​in.ts

import { MyClass } from './MyClass.ts';

现在当我构建这个时:

gulp.task('ts-compile', () => {

    return browserify()
        .add('./src/main.ts')
        .plugin(tsify)
        .bundle()
        .on('error', function(error) {
            console.error(error);
        })
        .pipe(source('blueberry.js'))
        .pipe(buffer())
        .pipe(minify({
            ext: {
                min: '.min.js'
            }
        }))
        .pipe(gulp.dest('build/'))

});

它构建完成，但输出文件中不再包含 MyClass。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

},{}]},{},[1]);

当我尝试在浏览器中访问它时，如下所示:

MyClass.myFunc()

我出现以下错误:

Uncaught ReferenceError: MyClass is not defined

在我的 main.ts 文件中，如果我将其添加到窗口中，如下所示:

import { MyClass } from './MyClass.ts';
window['MyClass'] = new MyClass();

然后我得到这个输出:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
var MyClass = (function () {
    function MyClass() {
    }
    MyClass.myFunc = function () {
        console.log('Found Me!');
    };
    return MyClass;
}());
exports.MyClass = MyClass;

},{}],2:[function(require,module,exports){
"use strict";
var MyClass_ts_1 = require('./MyClass.ts');
window['MyClass'] = new MyClass_ts_1.MyClass();

},{"./MyClass.ts":1}]},{},[2]);

出现此错误:

Uncaught TypeError: MyClass.myFunc is not a function

我不知道如何使静态函数在浏览器中可访问...

Answer 1

window['MyClass'] --- 该变量保存对 MyClass 实例的引用，而不是对类本身的引用。显然，实例没有 myFunc 方法，因为它是静态的。

如果您希望全局 MyClass 变量保存对该类的引用，请将代码更改为:

window['MyClass'] = MyClass;