TypeScript のテスト プロジェクトがあります。コードはこちらにあります。
VS2012 で新しいプロジェクトを作成すると、app.tsファイルが作成されます。リンクで示されているように内容を変更し、という新しいモジュールを追加するとGameModule、コンパイルエラーが発生します。代わりに削除app.tsして作成するとMain.ts、すべてが正常にコンパイルされますが、問題があります-のみMain.tsがコンパイルされMain.js、コンパイルされないGameModule.tsままになります。
すべてのコードを 1 つの JS にマージするコンパイラを作成するにはどうすればよいですか?
Visual Studio 2013 と TypeScript 拡張機能がインストールされている場合は、ソリューション エクスプローラーでプロジェクトを右クリックし、[ Properties. タブをクリックしTypeScript Buildます。Combine JavaScript output into file:オプションのすぐ隣にある入力フィールドに、結合されたファイルに使用する名前を選択して入力します。このフィールドでは変数を使用できることに注意してください。例: 「$(ProjectDir)dist\js\myCombinedFile.js」。
この GUI オプションがどこにも見つからない場合は、プロジェクト構成ファイルを手動で変更してください。プロジェクト フォルダーに移動します。ソリューション エクスプローラーでプロジェクトを右クリックし、 をクリックしOpen folder in File Explorerます。ポップアップするフォルダーに、いくつかのファイルが表示されます。myProject.csproj任意のテキスト エディターでファイルを編集します。次のような 2 行を見つけます。
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
と
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
子ノードの 2 つのツリー内で、新しい子を各親に追加します。
<TypeScriptOutFile>$(ProjectDir)dist\js\myCombinedFile.js</TypeScriptOutFile>
Visual Studio に戻ると、プロジェクトをリロードするかどうかを尋ねられるはずです。もちろん、これは変更を有効にするために行わなければならないことです!
今説明した手動の手順は、まさに GUI の手順で行うものです。手動手順に関する私の考えは、この情報源に由来しています。
通常どおりにプロジェクトをビルドします。うまくいかない場合は、プロジェクトをリロードしてみてください。
コンパイラのコマンドライン引数を使用する必要があります
--outFile FILE出力を連結して単一のファイルに出力する
tsc --outFile modules.js main.ts app.ts
これには、サードパーティのツールやライブラリは必要ありません。
Microsoft のSystem.Web.Optimizationを使用できます。
BundleTable.Bundles.Add(new ScriptBundle("~/scripts/bundle.js").IncludeDirectory("~/scripts/", "*.js", true));
すべての *.js ファイル (*.ts ファイルをコンパイルした結果) は結合され、実行時に
http:// .../scripts/bundle.jsでアクセスできます。
現在のディレクトリで構成ファイルtsc --project ./を使用する場合、連結された出力ファイルを作成するために使用できます。tsconfig.json
ファイルは次のtsconfig.jsonようになります。
{
"compileOnSave": true,
"compilerOptions": {
"module":"system",
"target": "es5",
"sourceMap": true,
"outFile": "dist/app-build.js"
},
"files":[
"./src/index.ts",
"./typings/browser.d.ts"
]
}
クラシック ファイルのレイアウトは次のようになります。
project/
- src/
- index.ts
... all my ts files
- dist /
- vendor.js # angular, jquery...
- app-build.js # our build project
- system.js # Module loader we used
- index.html # call all js
- typings/
- browser.d.ts
- main.d.ts # for node.js server side, not included
- package.json
- tsconfig.json
悪いニュースは、SystemJS への呼び出しが必要なことです(RequireJS と同じように動作しますが、Tsc 1.8 の時点で、CommonJS は連結ビルドには受け入れられません)。
SystemJS について簡単に学びましょう: SystemJS を追加し、 でモジュールを呼び出しますindex.html。
<html lang="en" ng-app="skeleton">
<head>
<script src="system.js" type="text/javascript"></script>
<script src="angular.min.js"></script>
<script src="app-build.js" type="text/javascript"></script>
</head>
<body>
<skeletonDirective></skeletonDirective>
<script type="text/javascript">
System.import('index')
</script></body></html>
大きな利点は、IDE にバンドルさせることもできることです。いずれにしても、IDE は型を理解するためにコンパイルする必要があるため、2 回コンパイルすることを避けることができます。現時点では、Gulp や browserify などは必要ありません。SystemJS は、html テンプレートのロードなど、ほとんどのことを行う可能性があります。
私の理解が正しければ、単一の JS ファイルを生成する別の方法があります。
新しい HTML ファイルを作成し、次を使用してすべての .ts ファイルを含めます。
<script type="text/typescript" src="GameModule.ts"></script>
<script type="text/typescript" src="app.ts"></script>
TypeScript Compile .js ファイルを追加します。
<script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.min.js"></script>
<script type="text/javascript" src="http://niutech.github.com/typescript-compile/js/typescript.compile.min.js"></script>
この HTML ファイルをブラウザーで開きます。<script type="text/javascript"></script>自動的にコンパイルされた JS コードは、本文の末尾にある 1 つのタグに挿入されます。Web Inspector または Firebug を使用してプレビューおよびコピーできます。
これが実際のデモです。
Browserify.js を実行するポストビルドを追加する