在浏览器中找不到静态函数

Question

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

MyClass.ts

export class MyClass {

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

}

main.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 文件中，如果我像这样将它添加到 window 中：

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 实例的引用，而不是对 class 本身的引用。显然，一个实例没有 myFunc 方法，因为它是静态的。

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

window['MyClass'] = MyClass;

在浏览器中找不到静态函数

Static functions are not found in the browser

javascript

browserify

typescript