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


i can compile typescript project single js file source maps using this:

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

i can minify 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, go further. want combine compiled typescript code (app.js) couple third-party js libraries single minified file maintains source maps pointing original typescript (for code) or javascript (for third-party libraries).

i tried this, adding js library file input uglifyjs:

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

unfortunately, doesn't seem work. combine 1 file, , source maps typescript code seem preserved. when put error in lib/javascript-library.js, js console in browser (using source maps) says error in 1 of typescript files, wrong.

i typescript newb , can't imagine i'm first 1 want combine ts output random js libraries in single minified file source maps, can't find talking it. maybe approach wrong?

typescript compiler isn't smart, need use more specific tools. example: gulpjs.

requirements (if know gulpjs skip this):

  1. install nodejs
  2. run this: npm install -g typescript gulp install gulp taskrunner
  3. in project directory, run npm init , follow instruction create package.json
  4. run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev install ts compile, concat, uglify e generate sourcemaps tools
  5. create file 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()) // means sourcemaps generated          .pipe(ts({              sortoutput: true,                        // ...           }));        return tsresult          .pipe(concat('lib/js-library.js')) // can use other plugins support gulp-sourcemaps          .pipe(uglify())           .pipe(sourcemaps.write()) // sourcemaps added .js file           .pipe(gulp.dest('release/')); }); 

and now, run gulp compile , see magic!

learn packages , build custom task compile.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

jsf - How to ajax update an item in the footer of a PrimeFaces dataTable? -

jquery - Keeping Kendo Datepicker in min/max range -