Как создать внешние исходные карты, поэтому можно использовать отладчик Chrome в Vscode/Typcript для браузера с помощью Gulp

Question

Я хочу использовать Gulp для создания моего очень простого проекта Виджета , работающего в браузере. Используя gulp-typescript, он добавляет modules.export в сгенерированные файлы js, поэтому я нашел несколько примеров browserify.

теперь у меня есть следующий gulp.js файл

var gulp = require('gulp'); 
var del = require('del'); 
var ts = require("gulp-typescript"); 
var tsProject = ts.createProject("tsconfig.json"); 
var sourcemaps = require('gulp-sourcemaps'); 
var browserify = require("browserify"); 
var source = require('vinyl-source-stream'); 
var tsify = require("tsify"); 

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

gulp.task("copy-html", function() { 
    return gulp.src("*.html") 
    .pipe(gulp.dest("build")); 
}); 
gulp.task("copy-css", function() { 
    return gulp.src("src/*.css") 
    .pipe(gulp.dest("build")); 
}); 
gulp.task("default", ["clean", "copy-html", "copy-css"], function() { 
    return browserify({ 
    basedir: '.', 
    debug: true, 
    entries: ['src/main.ts'], 
    cache: {}, 
    packageCache: {} 
}) 
.plugin(tsify)  
.bundle()  
.pipe(source('bundle.js'))   
.pipe(gulp.dest("build")); 
}); 

Это создает bundle.js, и это, кажется, имеет soucemaps встроенные в него. Отладка в Chrome, похоже, работает нормально, но я пытаюсь использовать плагин отладчика Chrome vscode от here, но контрольные точки отключены.

My launch.json выглядит следующим образом.

{ 
"version": "0.2.0", 
"configurations": [ 
{ 
    "name": "Launch Chrome against localhost, with sourcemaps", 
    "type": "chrome", 
    "request": "launch", 
    "file": "${workspaceRoot}/build/index.html", 
    "sourceMaps": true 

}, 
{ 
    "name": "Attach to Chrome, with sourcemaps", 
    "type": "chrome", 
    "request": "attach", 
    "port": 9222, 
    "sourceMaps": true, 
    "webRoot": "${workspaceRoot}" 
    } 
] 
} 

Так что я подумал, что мне нужна внешние карты источника, поэтому попытался с помощью gulp-sourcemaps из here, но просто не могу получить пример для работы с выше сценарием (независимо от того, где я ввожу .pipe(sourcemaps.init()) и .pipe(sourcemaps.write()) я получаю ошибки глотком сборки.

Я пробовал различные предложения, но ни одна работа (возможно, многие из них уже устарели, например, с помощью outDir в launch.json я получаю ошибку Property ourDir is not allowed.

Итак, я сразу после того, что я люблю d сделать, чтобы использовать этот отладчик с, Typcript, в Chrome, который для меня, как я думал, был бы общим, но не может найти пример, чтобы заставить это работать. Я предполагаю, что это (встроенные) исходные коды, но не уверены.

Любая помощь здесь была бы принята с благодарностью!

Answer 1

Действительно ли ваш «запуск Chrome» запускает хром и находит ваш локальный хост? Я не вижу там URL-адреса. Я начал с того же кода примера, с которым вы связались, и это не сработало для меня, как есть, я добавил некоторые параметры, которые я нашел в другом месте, и он работает. Вот мой «запуск»

{ 
     "name": "Chrome : Launch with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     // "preLaunchTask": "sync", 
     "url": "http://localhost:3000", 
     "webRoot": "${workspaceRoot}", 
     "sourceMaps": true, 
     "runtimeArgs": [ 
     "--remote-debugging-port=9222" 
     ] 
    } 

Обратите внимание на локальном порт, что использует мой browserSync (и browserSync запускается первого, в моем случае с preLaunchTask или вручную с помощью вызова задачи глотка). Я не пользуюсь браузером или машинописным текстом, поэтому я не знаю много о них, поэтому я извиняюсь, если этот код не имеет смысла с ними. Но я бы попробовал добавить параметр url с вашим номером порта и параметром runtimeArgs и посмотреть, помогают ли они.

Answer 2

У меня была аналогичная проблема, и установка sourceRoot в задаче сборки исправила это для меня. Howere я не использовал browserify ...

Но попробуйте добавить Глоток-sourcemaps к трубе:

gulp.task("default", ["clean", "copy-html", "copy-css"], function() { 
    return browserify({ 
    basedir: '.', 
    debug: true, 
    entries: ['src/main.ts'], 
    cache: {}, 
    packageCache: {} 
}) 
.pipe(sourcemaps.init()) 
.plugin(tsify)  
.bundle()  
.pipe(source('bundle.js')) 
.pipe(sourcemaps.write({includeContent: false, sourceRoot: '/src'}))   
.pipe(gulp.dest("build")); 
});