Come combinare il codice TypeScript e le librerie JS in un unico file con le mappe di origine?

Question

posso compilare correttamente il mio progetto dattiloscritto in un unico file JS con le mappe di origine utilizzando qualcosa di simile:

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

Posso anche minify con successo che output utilizzando UglifyJS, pur mantenendo fonte mappe intatta:

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

Tuttavia, vorrei andare un po 'oltre. Voglio combinare il mio codice TypeScript compilato (app.js) con un paio di librerie JS di terze parti in un singolo file minificato che mantiene le mappe di origine che puntano al TypeScript originale (per il mio codice) o JavaScript (per le librerie di terze parti).

Ho provato qualcosa di simile, in fondo solo l'aggiunta di un file di libreria JS per l'ingresso UglifyJS:

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

Purtroppo, che non sembra funzionare. Combina tutto in un unico file e le mappe di origine per il codice TypeScript sembrano essere conservate. Ma quando inserisco un errore in lib/javascript-library.js, la console JS nel mio browser (usando le mappe di origine) dice che l'errore è in uno dei miei file TypeScript, che è ovviamente sbagliato.

Sono un newb di tipoScript e non riesco ad immaginare di essere il primo a voler combinare l'output di TS con le librerie JS casuali in un singolo file minificato con le mappe di origine, ma non riesco a trovare nessuno che ne parli . Quindi forse il mio approccio è completamente sbagliato?

Answer 1

Il compilatore di dattiloscritto non è così intelligente, per fare ciò è necessario utilizzare strumenti più specifici. Esempio: gulpjs.

requisiti (se si sa gulpjs saltare questo):

1. installare nodejs
2. run questo: npm install -g typescript gulp installare sorso TaskRunner
3. nella directory del progetto, eseguire npm init e seguire le istruzioni per creare package.json
4. esecuzione: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev da installare ts compile, concat, uglify e generate sourcemaps strumenti
5. creare il file con il nome gulpfile.js

Definire 'compilare' compito 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/')); 
}); 

E ora, eseguire gulp compile e vedere la magia!

Impara questi pacchetti e crea la compilazione di attività personalizzata.