Gulp typescript + navegación; Puntos de SourceMap agrupados para transpirar JS en lugar de fuente TS -- javascript campo con typescript campo con gulp campo con browserify campo con source-maps camp Relacionados El problema

Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS


4
vote

problema

Español

Estoy trabajando en un proyecto TIPSIPT que está transpilado a ES5 JS y luego ejecute navegación para crear un solo paquete .js y SourCemap. Los SourceMaps agrupados apuntan al Transpiled JS en lugar de la fuente TS aunque estoy generando Paps que apuntan correctamente a la fuente TS cuando se transpone a JS.

Es como si Browserify está ignorando los SourCemaps existentes que apuntan al código TS y creando sus propios mapas nuevos al código JS Transpiled.

Aquí están mis tareas de tragamonedas para el código de referencia se compilan en una carpeta TEMP y luego se navegan desde allí. Esto utiliza navegación-incremental para apoyar la compilación incremental.

¡Gracias!

Nota: a través de otras preguntas que ya he intentado usar tsify , según mi comprensión, no funcionará con mi proyecto, ya que usamos la sintaxis y el amplificador de importación; CommonesJS, informa sobre los problemas de compilación donde TSC y Gulp-Typycript no (los mismos errores ya sean usados ​​a través de Gulp o a través de CLI). También intenté Minifyify, pero no resolvió el problema.

  var gulp        = require('gulp'),    ts          = require('gulp-typescript'),    browserify = require('browserify'),    browserifyInc = require('browserify-incremental'),    source      = require('vinyl-source-stream'),    del         = require('del'),    sourcemaps  = require('gulp-sourcemaps'),    buffer = require('vinyl-buffer'),    xtend = require('xtend');    var tsProject = ts.createProject('tsconfig.json');    //COMPILE TS  gulp.task('compileTs', function () {    var sourceTsFiles = [config.src.tsFiles, config.src.tsTypes];      var tsResult = gulp.src(sourceTsFiles)      .pipe(sourcemaps.init())      .pipe(ts(tsProject));      return tsResult.js      .pipe(sourcemaps.write('.', {        //includeContent: false,        //sourceRoot: "../../src/js/"      }))      .pipe(gulp.dest(config.tempDir));  });    //BUNDLE BUILT TS->JS  gulp.task('bundleJs', [], function () {    var b = browserify(xtend(browserifyInc.args, {      entries: config.tempDir + '/main.js',      extensions: ['.js', '.jsx'],      debug: true    }));      browserifyInc(b,  {cacheFile: config.tempDir + '/browserify-cache.json'});      return b.bundle()    .pipe(source('main.js'))    .pipe(buffer())    .pipe(sourcemaps.init({ loadMaps: true }))    .pipe(sourcemaps.write('.'))    .pipe(gulp.dest(config.dest.jsDir));  });  
Original en ingles

I'm working on a Typescript project that is transpiled to ES5 JS and then run through browserify to create a single .js bundle and sourcemap. The bundled sourcemaps point to the transpiled JS rather than the source TS even though I am generating sourcemaps which properly point to the source TS when transpiling to JS.

It's as if browserify is ignoring the existing sourcemaps pointing to the TS code and creating its own new maps to the transpiled JS code.

Here are my gulp tasks for reference- code is compiled to a temp folder and then browserified from there. This uses browserify-incremental to support incremental compilation.

Thanks!

Note: Via other SO questions I have already tried using tsify, per my understanding it won't work with my project as we use import syntax & commonjs, it reports compile issues where tsc and gulp-typescript do not (same errors whether used via gulp or via CLI). I also tried minifyify but it did not solve the issue.

var gulp        = require('gulp'),    ts          = require('gulp-typescript'),    browserify = require('browserify'),    browserifyInc = require('browserify-incremental'),    source      = require('vinyl-source-stream'),    del         = require('del'),    sourcemaps  = require('gulp-sourcemaps'),    buffer = require('vinyl-buffer'),    xtend = require('xtend');    var tsProject = ts.createProject('tsconfig.json');    //COMPILE TS  gulp.task('compileTs', function () {    var sourceTsFiles = [config.src.tsFiles, config.src.tsTypes];      var tsResult = gulp.src(sourceTsFiles)      .pipe(sourcemaps.init())      .pipe(ts(tsProject));      return tsResult.js      .pipe(sourcemaps.write('.', {        //includeContent: false,        //sourceRoot: "../../src/js/"      }))      .pipe(gulp.dest(config.tempDir));  });    //BUNDLE BUILT TS->JS  gulp.task('bundleJs', [], function () {    var b = browserify(xtend(browserifyInc.args, {      entries: config.tempDir + '/main.js',      extensions: ['.js', '.jsx'],      debug: true    }));      browserifyInc(b,  {cacheFile: config.tempDir + '/browserify-cache.json'});      return b.bundle()    .pipe(source('main.js'))    .pipe(buffer())    .pipe(sourcemaps.init({ loadMaps: true }))    .pipe(sourcemaps.write('.'))    .pipe(gulp.dest(config.dest.jsDir));  });
              
     
     

Lista de respuestas

5
 
vote

Respuesta corta

En el compileTs TEARK Debe escribir los archivos SOURCCAPS en los archivos de salida debug1 , en lugar de los archivos «código> 99887776662 DEDICADO También necesita establecer includeContent en VERDADERO, y especifique el debug4 .

Luego, en la tarea bundleJs , que tiene navegación debug TRUE es suficiente para generar SOURCEMAPS.

Más detalles

Algún paquete no proporciona los datos de origen necesarios en la utilidad SOURCEMAPS en la tarea del paquete. Afortunadamente, SourCemaps puede volver a leer el archivo .ts . Para ese paso de recuperación para trabajar, necesita rutas de archivo correctas, por eso es por eso que el debug68 en la tarea de compilación de TypScript es tan crucial.

Aquí parece haber otros Gotchas aquí. Por ejemplo, si escribe los Paps de SOURCCAP en un archivo debug69 en la tarea de compilación TyperScript, luego, más tarde, la tarea del paquete generará Paps SourCemaps que apuntan a los archivos compilados . Por lo tanto, es crucial, es crucial que la tarea de compilación incorpore los archivos SOURCCAPS en los archivos reales .

Si el indicador .js2 para navegar es cierto, generará Paps. El .js3 Capas aquí tiene una interacción de buggy y debe eliminarse.

un ejemplo de trabajo de la vida real

Estructura de directorio

  .js4  

tsconfig.json

  .js5  

PAQUETE.JSON

  .js6  

GulpFile.js

  .js7  
 

Short answer

In the compileTs task you need to write the sourcemaps to the output .js files, instead of dedicated .map files. You also need to set includeContent to true, and specify the correct sourceRoot.

Then in the bundleJs task, having browserify debug true is enough to generate sourcemaps.

More details

Some package doesn't provide the necessary source data to the sourcemaps utility in the bundle task. Luckily sourcemaps can re-read the .ts file. For that recovery step to work, it needs correct file paths, so that's why the correct sourceRoot in the TypeScript compilation task is so crucial.

There seem to be other gotchas here as well. For example if you write the sourcemaps to a dedicated .map file in the TypeScript compilation task, then later the bundle task will generate sourcemaps that point to the compiled .js files. So it's again crucial that the compilation task embeds the sourcemaps into the actual .js files.

If the debug flag for browserify is true, it will generate sourcemaps. The extra gulp-sourcemaps layering here has a buggy interaction and should be removed.

A working example from real life

Directory structure

proj     /ts         /def             my-declarations.d.ts         /src             my-sources.ts         /tmp             temp-files-get-created-here-by-gulp.js         tsconfig.json     /web         /static             /js                 final-result-goes-here.js     gulpfile.js     package.json 

tsconfig.json

{     "compilerOptions": {         "noImplicitAny": true,         "removeComments": true,         "declaration": false,         "jsx": "React",         "target": "ES5",         "module": "CommonJS"     },     "exclude": [         "tmp"     ] } 

package.json

{   "name": "my-awesome-project",   "version": "0.1.0",   "devDependencies": {     "browserify": "^13.0.1",     "gulp": "^3.9.1",     "gulp-sourcemaps": "^1.6.0",     "gulp-typescript": "^2.13.6",     "gulp-uglify": "^1.5.3",     "gulp-util": "^3.0.7",     "vinyl-buffer": "^1.0.0",     "vinyl-source-stream": "^1.1.0"   } } 

gulpfile.js

var path = require('path'); var browserify = require('browserify'); var gulp = require('gulp'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var gutil = require('gulp-util'); var ts = require('gulp-typescript'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify');  var debug = false;  var paths = {     tsConfig: 'ts/tsconfig.json',     scriptsSrc: ['ts/def/**/*.ts', 'ts/src/**/*.ts', 'ts/src/**/*.tsx'],     scriptsDst: 'web/static/js',     outDev: 'bundle.dev.js',     outFinal: 'bundle.js',     tempDst: 'ts/tmp',     entry: 'ts/tmp/entry.js' };  var tsProject = ts.createProject(paths.tsConfig, { noExternalResolve: true });  gulp.task('ts', function () {     var tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(ts(tsProject));     return tsResult.js.pipe(sourcemaps.write('', { debug: debug, includeContent: true, sourceRoot: './ts/src' })).pipe(gulp.dest(paths.tempDst)); });  gulp.task('dev', ['ts'], function() {     var bsfy = browserify({ entries: paths.entry, debug: true }); // Debug true generates sourcemaps     return bsfy.bundle()         .on('error', gutil.log)         .pipe(source(path.join(paths.scriptsDst, paths.outDev)))         .pipe(buffer())         .pipe(gulp.dest('./')); });  gulp.task('final', ['ts'], function() {     process.env.NODE_ENV = 'production';     var bsfy = browserify({ entries: paths.entry, debug: false });     return bsfy.bundle()         .on('error', gutil.log)         .pipe(source(path.join(paths.scriptsDst, paths.outFinal)))         .pipe(buffer())         .pipe(uglify())         .pipe(gulp.dest('./')); });  // Rerun the dev task when a file changes gulp.task('watch', function() {     gulp.watch(paths.scriptsSrc, ['dev']); });  // By default run all the tasks gulp.task('default', ['dev', 'final']); 
 
 
 
 
-1
 
vote

Si usa ambas tareas al mismo tiempo, la segunda tarea escribirá nuevos mapas de origen. Sugeriría que solo escribes mapas de origen una vez, en la tarea .js8 .

Creo que este es el único problema en sus tareas.

 

If you use both tasks at the same time, the second task will write new source maps. I'd suggest, that you only write source maps once, in the compileTs task.

I think this is the only problem in your tasks.

 
 

Relacionados problema

1  ¿Cómo detener los SOURCEMAPS / USEMIN DE APROXITIVO CSS .MAP <ENLACE> Etiqueta a la salida?  ( How to stop sourcemaps usemin from appending css map link tag to output ) 
Gulp-USEMIN está generando y agregando la etiqueta de enlace de SOURCEMAP CSS para emitir HTML, pero no hacer para JS. ¿Cómo lo dedo de anexar la etiqueta SOU...

2  Entendiendo los mapas de la fuente  ( Understanding source maps ) 
Tengo el siguiente código con números de línea en el archivo basic.js : 1 /** 2 * This is a multi-line comment. 3 * So the error shouldn't throw until a...

4  CSS Recopilación / Compresión y Mapas de Fuente V3  ( Css compilation compression and source maps v3 ) 
¿Alguien sabe de una herramienta que comprimirá / minificará / combinará mis archivos CSS y producirá un SOURCEMAP válido V3 que se puede usar con Chrome? Pre...

6  ¿Cómo usar Grunt-Uglifyjs y SourCEmps?  ( How to use grunt uglifyjs and sourcemaps ) 
Estoy tratando de hacer que SourCemaps para jugar bien mientras estoy usando la tarea Grunt y Uglifyjs Grunt. Aquí está la tarea actual: uglify: { dist...

2  Maqueo de WEBPACK MÓDULO CALIENTE REEMPLAZO (HMR) SOURCEMAPS NO ACTUALIZADO / NUEVO CÓDIGO NO VISIBLE EN HERRAMIENTES DE DEV  ( Webpack hot module replacement hmr sourcemaps not updated new code not visib ) 
He establecido HMR con éxito, todo funciona, incluido el proxyying el sitio de Backend. El único problema que queda es que no puedo ver el código original rea...

26  ¿Chrome no está cargando mapas de fuente CSS?  ( Chrome not loading css source maps ) 
Hasta hace poco, mi navegador Chrome estaba cargando correctamente los archivos de MAP de CSS. Ahora, no lo es. La configuración está encendida: y los ...

2  La consola no muestra la fuente del evento del mapa de origen  ( Console does not show event source from source map ) 
En Firefox cargué mi aplicación web que tiene un mapa de origen. El mapa de origen parece estar cargado correctamente, ya que la pestaña del depurador muestra...

1  Eliminar momento.js de dependencias transitivas  ( Remove moment js from transitive dependencies ) 
Uso de Source-Map-Explorer Puedo ver que varias bibliotecas importan su propia biblioteca de momentos. Mi aplicación en sí también importa momento .js. Aquí h...

1  ¿Por qué el paquete y el minificador 2015 no generan archivos de mapas de fuente CSS?  ( Why is bundle minifier 2015 do not generate css source map files ) 
su en Visual Studio 2015, desde la web esencial actualizada a la versión 2015.2 que proporcionan un paquete y amplificador; Minifier para apoyar el paquete y ...

60  Menos / SASS DEBUGGING EN HERRAMIENTAS DE CHROME DEV / FIREBUG [CERRADO]  ( Less sass debugging in chrome dev tools firebug ) 
Según lo que actualmente representa, esta pregunta no es un buen ajuste para nuestro Q & Amp; un formato. Esperamos que las...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos