javascript - outdir - typescript strict mode

Gulp Typescript+Browserify; Los puntos del mapa fuente empaquetados transportaban JS en lugar de fuente TS

Question

Estoy trabajando en un proyecto de TypeScript que se transporta a ES5 JS y luego se ejecuta a través de browserify para crear un único paquete .js y un mapa fuente. Los mapas de origen combinados apuntan al JS transpilado en lugar de al TS de origen aunque estoy generando mapas de origen que apuntan correctamente al TS fuente al transpilar a JS.

Es como si browserify estuviera ignorando los mapas de origen existentes apuntando al código TS y creando sus propios mapas nuevos para el código JS transpilado.

Estas son mis tareas para el código de referencia compiladas en una carpeta temporal y luego navegadas desde allí. Esto usa browserify-incremental para admitir la compilación incremental.

¡Gracias!

Nota: A través de otras preguntas de SO ya he intentado usar tsify , según entiendo, no funcionará con mi proyecto ya que usamos sintaxis de importación y commonjs, informa problemas de compilación donde tsc y gulp-typescript no (los mismos errores si se usan a través de trago o vía CLI). También probé 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));
});

Answer 1

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

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

Answer 2

Respuesta corta

En la tarea de compileTs , debe escribir los mapas de origen en los archivos de salida .js , en lugar de archivos .map dedicados. También debe establecer includeContent en true y especificar el sourceRoot correcto.

Luego, en la tarea bundleJs , tener browserify debug true es suficiente para generar sourcemaps.

Más detalles

Algunos paquetes no proporcionan los datos de origen necesarios para la utilidad de mapas de origen en la tarea de paquete. Afortunadamente, los mapas de origen pueden volver a leer el archivo .ts . Para que ese paso de recuperación funcione, necesita rutas de archivo correctas, por eso es que el sourceRoot correcto en la tarea de compilación de TypeScript es tan crucial.

Parece que hay otros problemas aquí también. Por ejemplo, si escribe los mapas de origen en un archivo .map dedicado en la tarea de compilación de TypeScript, luego la tarea de paquete generará mapas de origen que apunten a los archivos .js compilados. Entonces, nuevamente es crucial que la tarea de compilación incorpore los mapas de origen en los archivos .js reales.

Si el indicador de debug de browserify es verdadero, generará los mapas de origen. La estratificación adicional de gulp-sourcemaps aquí tiene una interacción gulp-sourcemaps y debería eliminarse.

Un ejemplo de trabajo de la vida real

Estructura de directorios

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"
    ]
}

paquete.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'']);