web-dev-qa-db-ja.com

TypeScriptコードとJSライブラリをソースマップを含む1つのファイルに組み合わせる方法は？

次のようなものを使用して、TypeScriptプロジェクトをソースマップを含む単一のJSファイルに正常にコンパイルできます。

tsc --sourcemap --out app.js app.ts

ソースマップをそのまま維持しながら、UglifyJSを使用してその出力を正常に縮小することもできます。

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

ただし、もう少し先に進みたいと思います。コンパイルしたTypeScriptコード（app.js）をいくつかのサードパーティJSライブラリと組み合わせて、元のTypeScript（コードの場合）またはJavaScript（サードパーティの場合）を指すソースマップを維持する単一の縮小ファイルにしたいと思います。パーティーライブラリ）。

基本的に、JSライブラリファイルをUglifyJSへの入力に追加するだけで、次のようなことを試しました。

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

残念ながら、それはうまくいかないようです。すべてを1つのファイルに正常に結合し、TypeScriptコードのソースマップは保持されているようです。しかし、lib/javascript-library.jsにエラーを入れると、ブラウザのJSコンソール（ソースマップを使用）に、エラーがTypeScriptファイルの1つにあると表示されますが、これは明らかに間違っています。

私はTypeScriptの初心者であり、TS出力をランダムなJSライブラリと組み合わせて、ソースマップを含む単一の縮小ファイルにまとめたいと思った最初の人だとは想像できませんが、それについて話している人は誰もいません。だから多分私のアプローチは完全に間違っていますか？

javascripttypescriptuglifyjssource-maps
20
dumbmatter

TypeScriptコンパイラはそれほど賢くはありません。これを行うには、より具体的なツールを使用する必要があります。例： gulpjs 。

要件（gulpjsを知っている場合はこれをスキップしてください）：

  1. インストール nodejs
  2. これを実行します：npm install -g TypeScript gulp gulptaskrunnerをインストールします
  3. プロジェクトディレクトリで、npm initを実行し、指示に従ってpackage.jsonを作成します
  4. 実行：npm install gulp gulp-TypeScript gulp-concat gulp-uglify gulp-sourcemaps --save-devインストールする ts compile 、 concat 、 glify e ソースマップの生成 ツール
  5. gulpfile.jsという名前のファイルを作成します

Gulpfile.jsで「コンパイル」タスクを定義します。

var gulp = require('gulp');
var ts = require('gulp-TypeScript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

gulp.task('compile', function() {
     var tsResult = gulp.src('app.ts')
        .pipe(sourcemaps.init()) // This means sourcemaps will be generated 
        .pipe(ts({
             sortOutput: true,
                       // ... 
         }));

      return tsResult
         .pipe(concat('lib/js-library.js')) // You can use other plugins that also support gulp-sourcemaps
         .pipe(uglify()) 
         .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file 
         .pipe(gulp.dest('release/'));
});

そして今、gulp compileを実行して、魔法を見てください！

このパッケージを学び、カスタムタスクコンパイルをビルドします。

20
Abraão Alves