如何将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安装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,看看魔术!

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