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

Question

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

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

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

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).

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

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.

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?

Maybe relevant: https://github.com/mishoo/UglifyJS2/issues/145 — dumbmatter, Jul 01 '14 at 00:34
Maybe my answer http://stackoverflow.com/a/38679678/746347 will be helpful for someone. — mixel, Jul 31 '16 at 00:36

score 20 · Answer 1 · edited Jun 16 '15 at 16:17

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

Requirements (if you know gulpjs skip this):

install nodejs
run this: npm install -g typescript gulp to install gulp taskrunner
in project directory, run npm init and follow instruction to create package.json
run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev to install ts compile, concat, uglify e generate sourcemaps tools
create file with name gulpfile.js

Define 'compile' task in 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 compile and see the magic!

Learn this packages and build your custom task compile.

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

1 Answers1