javascript - Kako kombinirati TypeScript kod i JS knjižnice u jednu datoteku s mapama izvora?

Mogu uspješno kompajlirati svoj TypeScript projekt u jednu JS datoteku sa source mapama koristeći nešto ovako:

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

Također mogu uspješno smanjiti tu izlaznu datoteku koristeći UglifyJS, pri čemu zadržavam nepromijenjene izvorne mape:

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

Međutim, želio bih ići malo dalje. Želim kombinirati moj kompajlirani TypeScript kod (app.js) s nekoliko vanjskih JS biblioteka u jednu minificiranu datoteku koja održava source mapove usmjerene natrag na izvorni TypeScript (za moj kod) ili JavaScript (za vanjske biblioteke).

Pokušao sam nešto ovako, u osnovi samo dodavanje JS biblioteke u ulaz za UglifyJS:

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

Nažalost, čini se da to ne radi. Uspješno kombinira sve u jednu datoteku, i čini se da su mape izvornog koda za TypeScript očuvane. Ali kad stavim pogrešku u lib/javascript-library.js, JS konzola u mom pregledniku (koristeći mape izvornog koda) kaže da je pogreška u jednoj od mojih TypeScript datoteka, što očito nije točno.

Ja sam početnik u TypeScriptu i ne mogu zamisliti da sam prvi koji želi kombinirati TS output s raznim JS bibliotekama u jednu minificiranu datoteku sa source mapama, ali ne mogu pronaći nikoga tko o tome govori. Pa možda je moj pristup jednostavno potpuno pogrešan?

Odgovor #1

Typescript kompajler nije toliko pametan, za ovo trebate koristiti specifičnije alate. Primjer: gulpjs.

Zahtjevi (ako poznajete gulpjs, preskočite ovo):

  1. instaliraj nodejs
  2. pokrenite ovo: npm install -g typescript gulp za instalaciju Gulp taskrunnera
  3. u direktoriju projekta pokrenite npm init i slijedite upute za stvaranje package.json
  4. pokreni: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev za instalaciju alata za TS kompilaciju, spajanje, minimiziranje i generiranje sourcemaps
  5. kreiraj datoteku s imenom gulpfile.js

Definirajte zadatak 'compile' u 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/'));
});

A sada pokrenite gulp compile i pogledajte čaroliju!

Naučite ove pakete i izradite vlastiti prilagođeni zadatak za kompilaciju.

Povezani članci