Wie kombinieren Typoskript-code und JS-Bibliotheken in eine Datei mit source maps?

Kann ich erfolgreich kompilieren meine TypeScript-Projekt in eine einzelne JS Datei mit source maps mit so etwas wie dieses:

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

Kann ich auch erfolgreich verkleinern, dass die Ausgabe mit UglifyJS, während kartengrundlagen intakt:

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

Aber ich würde gerne mal etwas weiter. Ich will verbinden, meine kompiliert Typoskript-code (app.js) mit ein paar third-party-JS-Bibliotheken in einer einzigen minified Datei, die unterhält-source-Karten zeigen wieder auf die original-Typoskript (für meinen code) oder JavaScript (für die third-party-Bibliotheken).

Habe ich versucht, etwas wie dieses, im Grunde nur das hinzufügen einer JS-Bibliothek-Datei, um die Eingabe zu UglifyJS:

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

Leider nicht zu funktionieren scheint. Es hat erfolgreich verbinden alles in einer Datei, und die source-Karten für den Typoskript-code zu sein scheinen, erhalten. Aber wenn ich einen Fehler in lib/javascript-library.js die JS-Konsole in meinem browser (mit source maps) sagt, dass der Fehler in einer meiner Typoskript Dateien, die offensichtlich falsch ist.

Ich bin ein Typoskript newb, und ich kann mir nicht vorstellen, ich bin die erste, die kombinieren möchten, TS-Ausgang mit random JS-Bibliotheken in einer einzigen minified Datei mit source maps, aber ich kann nicht finden niemandem darüber zu reden. Also, vielleicht ist mein Ansatz einfach falsch ist?

InformationsquelleAutor der Frage dumbmatter | 2014-06-28

  1. 19

    Typescript-compiler ist nicht so schlau, dies zu tun, müssen Sie die Verwendung spezifischer tools. Beispiel: gulpjs.

    Anforderungen (wenn Sie wissen, gulpjs überspringen):

    1. installieren nodejs
    2. dies ausführen: npm install -g typescript gulp zu installieren Schluck taskrunner
    3. im Projekt-Verzeichnis, führen Sie npm init und Folgen Sie den Anweisungen Paket zu erstellen.json
    4. run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev zu installieren ts kompilierenconcatverunstalten e generieren sourcemaps tools
    5. Datei erstellen mit dem Namen gulpfile.js

    Definieren 'kompilieren' 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 nun gulp compile und sehen Sie die Magie!

    Lernen, diese Pakete und erstellen Sie Ihre eigene Aufgabe kompilieren.

    InformationsquelleAutor der Antwort Abraão Alves

Schreibe einen Kommentar