浏览器中找不到静态函数

时间:2016-07-05 03:03:21

标签: javascript typescript browserify

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

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()

我出现以下错误:

  

未捕获的ReferenceError:未定义MyClass

在我的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]);

出现此错误:

  

未捕获的TypeError:MyClass.myFunc不是函数

我无法弄清楚如何在浏览器中访问静态函数...

1 个答案:

答案 0 :(得分:1)

window['MyClass'] ---此变量包含对MyClass实例的引用,而不是类本身。显然,一个实例没有myFunc方法,因为它是静态的。

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

window['MyClass'] = MyClass;