TypeScriptプロジェクトを単一のJSファイルにコンパイルしてブラウザで使用できるようにする方法

Question

私が取り組んでいる小さなプロジェクト用のJavascript SDKを作成する必要があります。そうするために、私はTypeScriptプロジェクトを作成し、それを単一のJavascriptファイルにコンパイルすることを考えていたので、私のSDKのユーザーはそのファイルを自分のWebページに挿入するだけでした。

しかし、私はimportを使用して単一のファイルにコンパイルしようとすると、SystemJSのみをサポートすることに気づきました。

TypeScriptプロジェクトを1つのJSファイルにコンパイルしてブラウザで使用できるようにするにはどうすればよいですか？ブラウザで使用できることで

、私は活字体でクラスAppを作成する場合は、その後、私はDEVコンソールでこれを行うことができることを意味する：

var x = new App(); 

私は今、1時間以上もこの時だった、と私が見つけたことは、これが不可能であることを示唆しているようです。

---

編集：Thisは本当に私の質問に答えていませありません。私がこの例で述べたように、私はType37プロジェクトにAppというクラスがある場合、同じ名前のブラウザに可視でなければならないので、私の開発コンソールにはvar x = new App()があります。 （または、ユーザーがSDKファイルを挿入した後に注入するJSファイルでこれを行うことができます）。その答えは、SystemJSでアウトファイルを作成する方法を伝えるだけです。

Answer 1

これはwebpackを使用できます。Node.JSのようなモジュールをバンドルしようとするNode.JSユーティリティです。 Webpackはモジュールをグローバルオブジェクトに自動的にはエクスポートしませんが、エントリモジュールなどの実行に使用されるNode.JSのデフォルトのrequireを置き換える関数を生成します（または生成しようとします）。グローバルオブジェクト内の各モジュール（または各モジュールのプロパティ）

（活字体では、CommonJSモジュールを使用しています。あなたが直接WebPACKのから活字体をコンパイルしますので第二に、WebPACKのとの間で、TS-ローダー・プラグインをインストールして使用。）

たぶんそれがためにWebPACKの2に適用されますたとえば、__webpack_require__関数を変更します。これは、グローバルオブジェクトの内部ではなく、したがって、あなたはfunction __webpack_require__で、WebPACKのの生成されたソースコードに干渉しなければなりません：

function __webpack_require__(moduleId) { 
    // [...] (After the `if (installedModules...) ...`) 
    /* 
    * You don't have access to the module name, so export each 
    * property to the browser's global object. 
    */ 
    var exports = module.exports; 
    for (var key in exports) 
     window[key] = exports[key]; 
} 

の