如何将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 ，看看魔术！

学习这个包并构建自定义任务编译。