ガルプ+ Browserify +活字体ブラウザ

Question

に私の問題は以下の通りです：

私は一口+あなたは、通常のHTMLページ上で使用することができますJavaScriptに私の活字体をコンパイルするbrowserifyを使用し、問題は私のクラスは上で利用できることはありませんということですブラウザ：

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

これは私のtypescriptファイルです：

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

これは、ファイルは問題なくコンパイルし、私のindex.html（コンパイル済みのjsファイル）に含まれている私のgulpfile

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")); 
 
});

です。

しかし、私がしようとすると：

var t = new Test();

私は次のエラーを取得する：

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.