Wie können Sie TypScript-Code- und JS-Bibliotheken in einer Datei mit Quellkarten kombinieren?

Question

Ich kann erfolgreich so etwas wie dies mit meinem Typoskript Projekt in eine einzelne JS-Datei mit Quellkartierungen kompilieren: Ich kann erfolgreich

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

auch, dass die Ausgabe mit UglifyJS minify, unter Beibehaltung Quelle intakt Karten:

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

Allerdings würde ich gerne noch etwas weiter gehen. Ich möchte meinen kompilierten TypeScript-Code (app.js) mit ein paar JS-Bibliotheken von Drittanbietern in einer einzigen minimierten Datei kombinieren, die Quellkarten verwaltet, die auf das ursprüngliche TypeScript (für meinen Code) oder JavaScript (für die Bibliotheken von Drittanbietern) verweisen.

habe ich versucht, so etwas wie diese, im Grunde nur eine JS-Library-Datei mit dem Eingang zu UglifyJS Zugabe:

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

Leider, das nicht zu funktionieren scheint. Es kombiniert alles erfolgreich in einer Datei und die Quellzuordnungen für den TypeScript-Code scheinen erhalten zu bleiben. Aber wenn ich einen Fehler in lib/javascript-library.js einfüge, sagt die JS-Konsole in meinem Browser (mit Quellkarten), dass der Fehler in einer meiner TypeScript-Dateien ist, was offensichtlich falsch ist.

Ich bin ein Typskript newb und ich kann mir nicht vorstellen, dass ich der erste bin, der TS-Ausgabe mit zufälligen JS-Bibliotheken in einer einzigen minimierten Datei mit Quellkarten kombinieren möchte, aber ich kann niemanden finden, der darüber spricht . Vielleicht ist mein Ansatz also völlig falsch?

Answer 1

Typescript-Compiler ist nicht so schlau, dafür brauchen Sie spezifischere Werkzeuge. Beispiel: gulpjs.

Anforderungen (wenn Sie gulpjs überspringen dies wissen):

1. installieren nodejs
2. laufen diese: npm install -g typescript gulp schluck installieren Taskrunner
3. in Projektverzeichnis, npm init laufen und folgen Sie den Anweisungen package.json erstellen
4. Lauf: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev installieren ts compile, concat, uglify e generate sourcemaps Tools
5. erstellen Datei mit dem Namen gulpfile.js

'kompilieren' definieren Aufgabe 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/')); 
}); 

Und jetzt laufen gulp compile und die Magie sehen!

Erfahren Sie diese Pakete und erstellen Sie Ihre benutzerdefinierte Aufgabe kompilieren.