Wie kompiliere ich Javascript zusammen mit Typoskript in ein Bündel?

Question

Ich arbeite an einem Projekt, in dem wir sowohl js als auch ts Dateien haben und sie sollen zu einer Bundle-Datei zusammengeführt werden.

Ich bin mit großem Schluck-Typoskript und meine Konfiguration sieht wie folgt:

  gulp.src(cfg.ts_src) 
        .pipe(sourcemaps.init()) 
        .pipe(typescript({ 
         allowJs: true, 
         declaration: false, 
         diagnostics: false, 
         emitDecoratorMetadata: true, 
         experimentalDecorators: true, 
         module: "system", 
         moduleResolution: "classic", 
         noImplicitAny: true, 
         outFile: "./" + cfg.file, 
         preserveConstEnums: true, 
         pretty: true, 
         removeComments: true, 
         rootDir: "./static/" + cfg.dest, 
         target: "es5", 
        })) 
       .pipe(sourcemaps.write('.', { sourceRoot: "/static/", includeContent: false })) 

Das Problem, das ich habe ist, dass, wenn die Konfrguration nur js Dateien enthält, erstellt er ein Bündel mit Code. Wenn jedoch in der Konfiguration sowohl js als auch ts vorhanden sind, ignoriert typescript die Javascript-Dateien und kompiliert nur die ts-Dateien.

Wie kann ich ein Paket erstellen, das Code aus den Dateien js und ts enthält und auch noch funktionierende Quellkarten für die ts-Dateien hat?

Answer 1

Versuchen Sie zuerst, alle TS-Dateien zu kompilieren und sie in Temp dir zu legen, dann bündeln Sie all diese Dateien mit all Ihren anderen JS-Dateien. Kopieren Sie auch alle Quellkartendateien in das endgültige Verzeichnis.

Answer 2

Es sieht so aus, als ob Sie die alte Version des Schluck-Typoskripts verwenden. Vielleicht ist das ein Problem? Unten ist die Aufgabe, die für mich funktioniert und beide ts + Karten und keine rohen JS zusammengestellt emittiert:

gulp.task('build.js.dev',() => 
{ 
    var tsProject = ts.createProject('tsconfig.json', { 
     typescript: require('typescript') 
    }); 

    var tsResult = tsProject.src() 
     .pipe(sourcemaps.init()) 
     .pipe(tsProject()); 

    return merge([ 
     //Write definitions 
     //tsResult.dts.pipe(gulp.dest(TEMP_TARGET_FOLDER)), 
     //Write compiled js 
     tsResult.js.pipe(sourcemaps.write(
      ".", 
      { 
       includeContent: true, 
       sourceRoot: __dirname + "/dist" 
      })).pipe(gulp.dest(TEMP_TARGET_FOLDER))]); 
}); 

Hinweis Teil: tsResult.js.pipe(sourcemaps.write(

Sie den Zug-Typoskript-Dokumentation für weitere Proben entnehmen können.

Die TSconfig ist ziemlich ähnlich wie Ihre Optionen:

{ 
"compilerOptions": { 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "moduleResolution": "node", 
    "module": "commonjs", 
    "target": "es6", 
    "sourceMap": true, 
    "outDir": "dist", 
    "declaration": false, 
    "allowJs": true, 
    "jsx": "react", 
    "forceConsistentCasingInFileNames": true, 
    "types": [ 
     "node", 
     "jasmine" 
    ] 
}, 
"exclude": [ 
    "./node_modules", 
    "./dist", 
    "./.vscode" 
] 
} 

Hoffnung, das hilft.