Question

我可以使用类似这样的东西将我的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

不幸的是，这似乎不起作用。它确实将所有内容成功合并到一个文件中，并且似乎保留了TypeScript代码的源映射。但是当我在lib/javascript-library.js中输入错误时，浏览器中的JS控制台（使用源映射）说错误出现在我的一个TypeScript文件中，这显然是错误的。

我是一个TypeScript newb，我无法想象我是第一个想要将TS输出与随机JS库结合在一个缩小的文件中的源图，但是我不能发现有人在谈论它。那么也许我的方法完全错了？

Answer 1

Typescript编译器并不那么聪明，要做到这一点，你需要使用更具体的工具。示例：gulpjs。

要求（如果你知道gulpjs跳过这个）：

安装nodejs
运行此命令：npm install -g typescript gulp以安装gulp taskrunner
在项目目录中，运行npm init并按照说明创建package.json
运行：npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev以安装ts compile，concat，uglify e generate sourcemaps工具
使用名称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，看看神奇！

了解此软件包并构建自定义任务编译。

如何将TypeScript代码和JS库合并到一个带源映射的文件中？

1 个答案: