Typescript - リリースコードのサードパーティコードを含む

Question

単純なTypescriptプロジェクトを持つ私はTSファイルから個々のJSファイルを作成するためにGulpを使用しています（私は別々のままにする複数のHTMLファイルを持っています。

<script src="./js/myTSfileTranspiledToJS.js"></script> 

はTSファイルには、jQueryのようサードパーティのコードベースへの参照を持っていたと言うことができます -

var tsResult = gulp.src('./src/ts/**/*.ts') 
    .pipe(ts(tsProject)); 

return merge([ // Merge the two output streams, so this task is finished when the IO of both operations are done. 
    tsResult.dts.pipe(gulp.dest('release/definitions')), 
    tsResult.js.pipe(gulp.dest('release/js')) 
]); 

だから私のHTMLの内側に私のようなものがあるでしょう。コードはビルドされ、エラーなく正常にデプロイされますが、jQueryを含むTS/JSのメソッドを呼び出すと失敗します。 実行時にjQueryコードがないためです。

今、私はスクリプトタグを使用してjQueryのコードを含めることができます -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

が、私はむしろないと思います。蒸留されたJSファイルに第三者コードを組み込む方法はありますか？

EDIT

明確にする - 私はそれらのJSファイルが別々にロードする必要がなく、それらに同梱されなければならないに依存し、いくつかのJSファイルや何かを生成活字体のプロジェクトを持っていますよ。 A.jsにB.jsが必要な場合は、ビルドにそれを見て、A.jsにB.jsを含めて、B.jsをいくつかのhtmlファイルに追加してくれます。 以下の回答が示唆しているように - Broswerifyしかし、私はまだ私のセットアップでそれを考え出していない。

Answer 1

答えにHTML

<script src="./js/site.min.js"></script> 

で亭

bower install --save jquery  

でjqueryのをインストールします。私の質問にはwebpackを使用することです。下のリンクは明確な例です。 Typescriptプロジェクトを作成し、ここにjQueryなどの第三者図書館を追加する方法 - http://www.jbrantly.com/typescript-and-webpack/

これはtsd.json設定で動作するという欠点があります。これは現在、typings.jsonの使用を推奨しています。

まだ別のものにつながっても、この質問に答えます。

Answer 2

あなただけではJavaScriptを使用して、ドキュメントにスクリプトタグを追加here、のような何かを行うことができます：

<script type="text/javascript"> 
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>"); 
</script> 

もう一つの方法は、BrowserifyまたはRequireJSを使用することです。しかし、はあなたのプロジェクトに含まれているライセンスのを常にチェックしなければなりません。 がコードブロックを開始し、一方で、その中に

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 

が含まれ、そしてそれは、私はできるだけ多くの人が自分でもjQueryのを使用することをお勧めしたいものです取得を提供するために、何も異常ではありません彼らのJSプロジェクトで。 （亭とjqueryのに引っ張ら）ゴクゴクでmainbowerfilesを使用して

Answer 3

あなたの一気ファイル

var gulp = require('gulp'), 
    uglify = require("gulp-uglify"), //uglify 
    filter = require("gulp-filter"), //filters 
    concat = require("gulp-concat"), //concat files 
    mainBowerFiles = require('main-bower-files'); //auto get bower modules 
var paths = {}; 
paths.jsSource = mainBowerFiles().concat(["js/myTSfileTranspiledToJS.js"]); 
paths.baseReleaseFolder = "js"; 
paths.baseJSReleaseFile = "site.min.js"; 
gulp.task("min:js", function() { 
    var jsFilter = filter('**/*.js', { restore: true }); 
    return gulp 
     .src(paths.jsSource) 
     .pipe(jsFilter) 
     .pipe(sourcemaps.init({loadMaps:true})) 
     .pipe(uglify()) 
     .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(".")) 
     .pipe(jsFilter.restore); 
    });