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):
- install nodejs
- run this:
npm install -g typescript gulpinstall gulp taskrunner - in project directory, run
npm init, follow instruction create package.json - run:
npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-devinstall ts compile, concat, uglify e generate sourcemaps tools - 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
Post a Comment