如何將TypeScript代碼和JS庫合並到一個帶源映射的文件中？

Question

我可以使用以下內容將源Type映射成功編譯為單個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

不幸的是，這似乎不起作用。 它確實將所有內容成功合並到一個文件中，並且似乎保留了TypeScript代碼的源映射。 但是當我在lib/javascript-library.js輸入錯誤時，瀏覽器中的JS控制台（使用源映射）說錯誤出現在我的一個TypeScript文件中，這顯然是錯誤的。

我是一個TypeScript newb，我無法想象我是第一個想要將TS輸出與隨機JS庫結合在一個帶有源映射的縮小文件中的人，但我找不到任何人在談論它。 也許我的方法完全錯了？

Answer 1

Typescript編譯器並不那么聰明，要做到這一點，你需要使用更具體的工具。 示例： gulpjs 。

要求（如果你知道gulpjs跳過這個）：

1. 安裝nodejs
2. 運行這個： npm install -g typescript gulp typescript gulp來安裝gulp taskrunner
3. 在項目目錄中，運行npm init並按照指令創建package.json
4. 運行： npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev安裝TS編譯 ， CONCAT ， 丑化 ē 產生sourcemaps工具
5. 使用名稱gulpfile.js創建文件

在gulpfile.js中定義'compile'任務：

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 ，看看魔術！

學習這個包並構建自定義任務編譯。