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

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


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

Requirements (if you know gulpjs skip this):

  1. install nodejs
  2. run this: npm install -g typescript gulp to install gulp taskrunner
  3. in project directory, run npm init and follow instruction to create package.json
  4. run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev to install ts compile, concat, uglify e generate sourcemaps tools
  5. 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.