Conservazione della mappa sourc originale con Browserify

Question

Supponiamo di disporre di un modulo il cui codice sorgente non è ECMA 5 (ad esempio Coffescript o Typescript o altro) ed è distribuito in forma compilata con una mappa di origine. Come posso includere questa mappa sorgente in un pacchetto di Browserify?

Per esempio immaginiamo un progetto con una sola dipendenza:

index.js 
    node_modules 
     typescript_module 
       (main.ts) 
       dist 
        main.js 
        main.js.map 

Il "main.js.map" non viene consumato da browserify. Cioè, la mappa sorgente bundle di browserify viene mappata a "main.js" invece di rimandare alla mappa originale che descrive "main.ts"

Per la maggior parte delle trasformazioni, c'è un modo per inserire mappe sorgente generate dal passo precedente , ma c'è un modo per conservarli semplicemente sui file di input originali, quando le mappe sorgente esistono già?

Answer 1

Questo sembra essere un bug/non-feauture di Browserify:

https://github.com/substack/node-browserify/issues/772

Rispondendo alla mia domanda proprio perché è molto difficile da rintracciare ogni discussione di questo problema con Google e alcuna menzione di esso in i documenti di Browserify.

Answer 2

provare quanto segue:

var gulp  = require("gulp"), 
    browserify = require("browserify"), 
    tsify  = require('tsify'), 
    source  = require("vinyl-source-stream"), 
    sourcemaps = require("gulp-sourcemaps"), 
    buffer  = require("vinyl-buffer"), 
    uglify  = require("gulp-uglify"), 
    header  = require("gulp-header"); 

var settings = { 
    projectName : "test" 
};  

gulp.task("bundle", function() { 

    var mainTsFilePath = "src/main.ts"; 
    var outputFolder = "bundle/src/"; 
    var outputFileName = settings.projectName + ".min.js"; 
    var pkg   = require("./package.json"); 

    var banner = [ 
    "/**", 
    " * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>", 
    " * Copyright (c) 2015 <%= pkg.author %>", 
    " * <%= pkg.license %>", 
    " */", "" 
    ].join("\n"); 

    var bundler = browserify({ 
    debug: true, 
    standalone : settings.projectName 
    }); 

    // TS compiler options are in tsconfig.json file 
    return bundler.add(mainTsFilePath) 
       .plugin(tsify) 
       .bundle() 
       .pipe(source(outputFileName)) 
       .pipe(buffer()) 
       .pipe(sourcemaps.init({ loadMaps: true })) 
       .pipe(uglify()) 
       .pipe(header(banner, { pkg : pkg })) 
       .pipe(sourcemaps.write('./')) 
       .pipe(gulp.dest(outputFolder)); 
}); 

Nota: modificare i percorsi per abbinare il vostro progetto!

Answer 3

Dai un'occhiata allo sourceify.

Basta installarlo:

npm i --save-dev sourceify 

... e aggiungerlo come una trasformazione per package.json:

"browserify": { 
    "transform": [ 
    "sourceify" 
    ] 
} 

... e funziona da solo.

Answer 4

La mia configurazione è la seguente:

tsc --project tsconfig.script.json --outDir ~temp/ts 

compila src/script.ts a ~ temp/ts/script.js e ~ temp/ts/script.js.map.

browserify ~temp/ts/script.js --debug | exorcist --root ../../ ~temp/bfy/script.js.map > ~temp/bfy/script.js 

compila ~ temp/ts/script.js-~ temp/BFY/script.js e ~ temp/BFY/script.js.map.

sorcery --input ~temp/bfy/script.js --output dist/script.js 

Legge ~ temp/BFY/script.js; trova ~ temp/BFY/script.js.map + ~ temp/ts/script.js.map, e infine uscite dist/script.js e dist/script.js.map.

dist/script.js.il file mappa fa riferimento al file src/script.ts originale.

Richiede Browserify, Exorcist e Sorcery (e naturalmente CoffeeScript o TypeScript o qualsiasi altra cosa).