source - debug javascript chrome

Mantener los mapas originales de código fuente después de usar browserify

Question

Antecedentes: estoy compilando 2 archivos TypeScript dependientes a js, que también produce mapas de origen (un mapa de origen por archivo) usando tsc 1.0

Estoy usando -m commonjs y luego uso browserify para generar un solo bundle.js

Sin embargo, me di cuenta de que obtenía las referencias del mapa de origen original dos veces en el paquete, que no parece funcionar.

Pasar --debug tampoco parece hacer el truco.

Tenía la sensación de que este problema: https://github.com/substack/node-browserify/issues/325 está algo relacionado, pero no pude averiguar cómo se resolvió el problema.

También se sugirió https://github.com/substack/browser-pack , pero nuevamente no entiendo completamente cómo usarlo, ¿es un reemplazo para browserify?

En pocas palabras, me gustaría fusionar los archivos 2 js pero "fusionar" los mapas de origen js to ts utilizando browserify. ¿Es eso posible?

Answer 1

¡Creo una plantilla agradable para desarrollar con mecanografía o simplemente desarrollo un proyecto web!

Tal vez podrías tomar parte de mi proyecto, por ejemplo, tomarlo.

Incluye un Gulp con Scss & js minify, livereload, watch files, font & image minify. También incluyo pug si quieres usarlo. Simplemente puedes usar html si quieres.

También incluyo Fundación (marco).

¿Por qué mecanografiar es bueno? Puedes usarlo para "importar" .js en tu main.js como un main.scss que importas en todo tu estilo.scss.

https://github.com/t1gu1/front-end-typescript-template

¡Sígueme y deja comentarios en mi github! ^^

Answer 2

Aquí está mi solución de trabajo:

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));
});

Answer 3

Me enfrenté a un problema similar al intentar depurar mi aplicación Angular2 que se ejecuta en Chrome en Visual Studio Code (usando el depurador para la extensión de Chrome)

Yo uso gulp como mi corredor de tareas y mi configuración es la siguiente: archivos Typescript -> tsc -> intermedio es5 js -> browserify (más uglify en producción) -> paquete compilado

Mi estructura de directorio es la siguiente:

|- src
    |- my .ts files here
    |- main.ts - my entry file
|- dist
    |- intermediate files go here
|- web
    |- app.js - final bundle
    |- app.js.map - final bundle map
|- gulpfile.js

gulpfile.js :

var gulp = require(''gulp''),
    tsc = require(''gulp-typescript''),
    browserify = require(''browserify''),
    uglify = require(''gulp-uglify''),
    sourcemaps = require(''gulp-sourcemaps''),
    source = require(''vinyl-source-stream''),
    buffer = require(''vinyl-buffer'');

gulp.task(''tsc'', [], () => {
            return gulp.src([''src/**/*.ts''])
                    .pipe(sourcemaps.init())
                    .pipe(tsc({
                            "target": "es5",
                            "module": "commonjs",
                            "moduleResolution": "node",
                            "sourceMap": true,
                            "emitDecoratorMetadata": true,
                            "experimentalDecorators": true,
                            "lib": [ "es2015", "dom" ],
                            "noImplicitAny": true,
                            "suppressImplicitAnyIndexErrors": true
                    }))
                    .pipe(sourcemaps.write(null, {
                            "sourceRoot": function(file) { 
                                    let parts = file.relative.split(''//');
                                    let root = Array(parts.length + 1).join(''../'') + ''src'';
                                    return root;
                            }
                    }))
                    .pipe(gulp.dest(''dist/''));
    }); 
gulp.task(''bundle'', [''tsc''], () => {
    let b = browserify({
        entries: ''dist/main.js'',
        debug: true,
    });

    return b.bundle()
        .pipe(source(''app.js''))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write(''./'', {
            "sourceRoot": "../",
        }))
        .pipe(gulp.dest(''web/''));
})

gulp.task(''default'', [''bundle'']);

Explicación / razonamiento:

Por alguna razón, browserify no lee ni analiza los archivos .js.map vinculados en el archivo .js (mediante un comentario especial al final), pero sí cuando el mapa de origen está incrustado en el archivo js. Por lo tanto, al pasar null lugar de ruta a sourcemaps , se integrará al final del archivo .js generado.

El siguiente problema que noté fue que sourcemaps no sigue automáticamente la estructura del directorio (agregue ''../'' a sourceRoot cuando pasa al siguiente nivel de directorio), así que hice una función rápida para complementar esto. Tenga en cuenta que solo funciona en Windows, en Linux tendría que cambiar el carácter dividido.

function(file) { 
    let parts = file.relative.split(''//'); // put ''/'' here on Linux
    let root = Array(parts.length + 1).join(''../'') + ''src'';
    return root;
}

Ciertamente, hay una manera de detectar el separador de ruta correcto, estoy depurando solo en Windows, por lo que no es importante para mis propósitos.

Espero que ayude a alguien, porque he pasado toda la mañana del domingo buscando este problema.

Answer 4

Usando el complemento github.com/ben-ng/minifyify browserify, creo que puede usar TypeScript con Browserify y conservar los mapas de origen. Después de compilar los archivos de TypeScript, debería poder pasar el archivo de "entrada" (el que importa el otro a través de la sintaxis de commonjs) a través de browserify con el complemento minifyify.

var browserify = require(''browserify''),
    bundler = new browserify();

bundler.add(''entry.js'');
bundler.plugin(''minifyify'', {map: ''bundle.js.map''});
bundler.bundle({debug: true}, function (err, src, map) {
  if (err) console.log(err);
  fs.writeFileSync(''bundle.js'', src);
  fs.writeFileSync(''bundle.js.map'', map);
});

Answer 5

Creé proyecto de ejemplo .

Puede ejecutarlo con $(npm bin)/gulp build --env=dev para el entorno de desarrollo y se generarán los mapas de origen.

Hay gulpfile.js :

''use strict'';

var path = require(''path''),
    gulp = require(''gulp''),
    del = require(''del''),
    typescript = require(''gulp-typescript''),
    sourcemaps = require(''gulp-sourcemaps''),
    browserify = require(''browserify''),
    source = require(''vinyl-source-stream''),
    buffer = require(''vinyl-buffer''),
    uglify = require(''gulp-uglify''),
    gutil = require(''gulp-util''),
    inject = require(''gulp-inject''),
    babel = require(''gulp-babel''),
    argv = require(''yargs'').argv;

var devEnvironment = ''dev'',
    prodEnvironment = ''prod'',
    environment = argv.env || prodEnvironment,
    isDevelopment = environment === devEnvironment;

var projectPath = __dirname,
    srcDir = ''src'',
    srcPath = path.join(projectPath, srcDir),
    buildDir = path.join(''build'', environment),
    buildPath = path.join(projectPath, buildDir),
    distDir = ''dist'',
    distRelativePath = path.join(buildDir, distDir),
    distPath = path.join(buildPath, distDir);

var tsSrcPath = path.join(srcPath, ''typescript''),
    tsGlob = path.join(tsSrcPath, ''**'', ''*.ts''),
    tsBuildPath = path.join(buildPath, ''tsc'');

var indexHtmlName = ''index.html'',
    indexJsName = ''index.js'';

var distIndexJsPath = path.join(distPath, ''index.js''),
    distIndexHtmlPath = path.join(distPath, indexHtmlName);

var tsProject = typescript.createProject(''tsconfig.json'');

console.log(''Environment: '' + environment);

gulp.task(''clean'', function () {
    return del([buildPath]);
});

gulp.task(''tsc'', [''clean''], function () {
    var stream = gulp.src([tsGlob]);
    if (isDevelopment) {
        stream = stream
            .pipe(sourcemaps.init());
    }
    stream = stream
        .pipe(typescript(tsProject))
        .pipe(babel({
            presets: [''es2015'']
        }));
    if (isDevelopment) {
        stream = stream.pipe(sourcemaps.write({sourceRoot: tsSrcPath}));
    }
    return stream.pipe(gulp.dest(tsBuildPath));
});

gulp.task(''bundle'', [''tsc''], function () {
    var b = browserify({
        entries: path.join(tsBuildPath, indexJsName),
        debug: isDevelopment
    });

    var stream = b.bundle()
        .pipe(source(indexJsName))
        .pipe(buffer());
    if (!isDevelopment) {
        stream = stream.pipe(uglify());
    }
    return stream
        .on(''error'', gutil.log)
        .pipe(gulp.dest(distPath));
});

gulp.task(''build'', [''bundle''], function() {
    return gulp.src(path.join(srcPath, indexHtmlName))
        .pipe(inject(gulp.src([distIndexJsPath], {read: false}), {ignorePath: distRelativePath, addRootSlash: true}))
        .pipe(gulp.dest(distPath));
});

Debes prestar atención a las líneas:

1. stream = stream.pipe(sourcemaps.write('''', {sourceRoot: tsSrcPath})); - escriba mapas de origen en línea con sourceRoot apuntando a la ruta de las fuentes de escritura de sourceRoot . Los mapas en línea se escriben directamente en los archivos .js generados por tsc para build/dev/tsc .
2. debug: isDevelopment : en el entorno de desarrollo make browserify genera sus propios mapas de origen para el archivo de build/dev/dist/index.js paquete resultante, por lo que tendrá mapas de origen que hacen referencia a los archivos .js de build/dev/tsc que a su vez tienen referencia a los mapas de origen archivos .ts de src/typescript .

Con esta configuración podrá ver y depurar archivos .ts en el navegador:

Answer 6

tsify es un complemento de browserify que es mejor y reemplaza, por ejemplo, a typcriptcript.

npm install tsify browserify watchify

Usas tsify de esta manera:

browserify src/index.ts -p tsify --debug -o build/index.js

Tenga en cuenta que esto es compatible con el --debug búsqueda --debug , no se requieren trucos adicionales. Así que también puedes usarlo con watchify así:

watchify src/index.ts -p tsify --debug -o build/index.js