Typescript。 ReferenceError：requireが定義されていません

TypeScriptの公式docを読みました。そこからコードをコピーします。Typescript。 ReferenceError：requireが定義されていません

commonjsとrequerejsをインストールします。

"devDependencies": { 
    ... 
    "commonjs": "latest", 
    "requirejs": "latest" 
}

しかし、私は、ブラウザでエラーが発生します。

ReferenceError: require is not defined

それはindex.htmlにある：

<!DOCTYPE html> 
<body> 
    <script src="main.js"></script> 
</body>

それはコンパイルした後main.jsです：

"use strict"; 
var core_1 = require("./some_dir/some_file"); 
window.onload = function() { 
    var some = new some_file_1.SomeClass(); 
};

2017-01-22 Anonymous

どのようにプログラムを実行していますか？また：あなたはバンドラーを使用していますか？ –

私はPyCharmを使用しています。 Run-> Run 'index.html' –

どのようにhtmlページにすべてのjsファイルを含めるのですか？すべての.jsファイルを新しいスクリプトタグとして含めるだけですか？ –

ブラウザはモジュールの理解を持っていません（まだ）。つまり、require（）はノードでのみ実行すると動作しますが、ブラウザではそれをどうすればいいのか分かりません。

これを固定する2つの主要な方法があります。

はexports/require文を削除し、（スクリプトタグなど）HTMLファイルに（正しい依存順序で）すべての単一のjsファイルが含まれています。それらはすべて同じスコープを持ち、1つの大きな連結ファイルがあるかのように動作します。この解決策は、スコープを破壊するので非常に悪いです。サーバーから複数のjsファイルをフェッチする必要があるため、npmで取得したモジュールで実際には動作せず、ロード時間が悪くなります。
webpackのようなリソースバンドラを使用します。 Webpackは、main.jsファイルから始まるすべての従属ファイルを調べてバンドルし、単一の小さな.jsファイルに圧縮します。これは外部依存関係（npm）でも有効です。その場合は、その単一のbundle.jsファイルをhtmlに含めるだけです。

2017-01-22 15:31:05

うわー、私はwebpackを試して、それは働いています。それは少し複雑ですが、私は利益があると思います。ありがとう！ –

答えて