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

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 的源映射(对于第三方库)。

我试过这样的东西，基本上只是在 UglifyJS 的输入中添加一个 JS 库文件:

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 新手，我无法想象我是第一个想要将 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 compile , concat , uglify e generate sourcemaps工具
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 看看魔法!

了解此包并构建您的自定义任务编译。