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

How to combine TypeScript code and JS libraries into one file with source maps?

提问by dumbmatter

I can successfully compile my TypeScript project into a single JS file with source maps using something like this:

我可以使用以下内容将我的 TypeScript 项目成功编译为带有源映射的单个 JS 文件：

tsc --sourcemap --out app.js app.ts

I can also successfully minify that output using UglifyJS, while keeping source maps intact:

我还可以使用 UglifyJS 成功缩小该输出，同时保持源映射完整：

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

However, I would like to go slightly further. I want to combine my compiled TypeScript code (app.js) with a couple third-party JS libraries into a single minified file that maintains source maps pointing back to the original TypeScript (for my code) or JavaScript (for the third-party libraries).

但是，我想更进一步。我想将我编译的 TypeScript 代码 ( app.js) 与几个第三方 JS 库合并到一个缩小的文件中，该文件维护指向原始 TypeScript（对于我的代码）或 JavaScript（对于第三方库）的源映射。

I tried something like this, basically just adding a JS library file to the input to UglifyJS:

我尝试了这样的事情，基本上只是在 UglifyJS 的输入中添加一个 JS 库文件：

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

Unfortunately, that doesn't seem to work. It does successfully combine everything into one file, and the source maps for the TypeScript code seem to be preserved. But when I put an error in lib/javascript-library.js, the JS console in my browser (using source maps) says the error is in one of my TypeScript files, which is obviously wrong.

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

I am a TypeScript newb and I can't imagine I'm the first one to want to combine TS output with random JS libraries in a single minified file with source maps, but I can't find anyone talking about it. So maybe my approach is just completely wrong?

我是一个 TypeScript 新手，我无法想象我是第一个想要将 TS 输出与随机 JS 库结合在一个带有源映射的缩小文件中的人，但我找不到任何人在谈论它。所以也许我的方法完全错误？

回答by Abra?o Alves

Typescript compiler isn't so smart, to do this you need use more specific tools. Example: gulpjs.

Typescript 编译器不是那么聪明，为此您需要使用更具体的工具。示例：gulpjs。

Requirements (if you know gulpjs skip this):

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

1. install nodejs
2. run this: npm install -g typescript gulpto install gulp taskrunner
3. in project directory, run npm initand follow instruction to create package.json
4. run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-devto install ts compile, concat, uglifye generate sourcemapstools
5. create file with name gulpfile.js

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 的文件

Define 'compile' task in 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/'));
});

And now, run gulp compileand see the magic!

现在，快跑gulp compile看看魔法吧！

Learn this packages and build your custom task compile.

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