使用Browserify和Typescript的源映射进行Webstorm调试

Webstorm debugging with source maps from Browserify and Typescript

本文关键字：Webstorm 调试 映射 Browserify Typescript 使用      更新时间：2023-09-26

我的项目是一个Laravel网站，我将公共文件夹重命名为"html"。所以我的公共文件看起来像：

html
--js
----main.ts

从技术上讲，html是用于调试目的的站点的根。

使用browsrify，我现在已经为bundle.js生成了一些源地图，它们有main.ts的路径。问题是它们指向的是完整的路径：

"html/js/main.ts"

通常，我可以运行配置到html文件夹并捕获断点。

http://myapp.app:8000 ->> project>html

但这并没有达到断点，因为html文件夹在这个设置中并不真正存在。奇怪的是，我可以在Chrome工具中设置断点，而且它很有效。如何设置Webstorm，使其达到html文件夹中的断点？

编辑：

我使用以下要点作为我的源地图。

/**
 * Browserify Typescript with sourcemaps that Webstorm can use.
 * The other secret ingredient is to map the source directory to the
 * remote directory through Webstorm's "Edit Configurations" dialog.
 */
'use strict';
var gulp = require('gulp'),
    browserify = require('browserify'),
    tsify = require('tsify'),
    sourcemaps = require('gulp-sourcemaps'),
    buffer = require('vinyl-buffer'),
    source = require('vinyl-source-stream');
var config = {
    client: {
        outDir: './public/scripts',
        out: 'app.js',
        options: {
            browserify: {
                entries: './src/client/main.ts',
                extensions: ['.ts'],
                debug: true
            },
            tsify: {
                target: 'ES5',
                removeComments: true
            }
        }
    }
};
gulp.task('client', function () {
    return browserify(config.client.options.browserify)
        .plugin(tsify, config.client.options.tsify)
        .bundle()
        .on('error', function (err) {
            console.log(err.message);
        })
        .pipe(source(config.client.out))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./', {includeContent: false, sourceRoot: '/scripts'}))
        .pipe(gulp.dest(config.client.outDir));
});

我在Webstorm中修复了它。运行配置中html文件夹的正确远程url是：

http://myapp.app:8000/js/html

很奇怪，但Webstorm认为/js/html是一个文件夹，源文件就在里面。

编辑1：让我编辑这个答案。事实证明，上面的片段并没有给我所有的源映射。在检查映射文件时，源被列为js文件，而不是ts文件，这意味着调试器不会捕获断点。

这是一个正在工作的gulp任务，它监视任何Typescript文件的更改（只要它是main.ts的依赖项，并触发browserfy和新的源映射）。它需要tsify插件。

'use strict';
var watchify = require('watchify');
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 sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
    entries: ['./html/js/main.ts'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
gulp.task('bundle', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
b.plugin('tsify')
function bundle() {
    return b.bundle()
        // log errors if they happen
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        // optional, remove if you don't need to buffer file contents
        .pipe(buffer())
        // optional, remove if you dont want sourcemaps
        .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
        // Add transformation tasks to the pipeline here.
        .pipe(sourcemaps.write({includeContent: false, sourceRoot: './'})) // writes .map file
        .pipe(gulp.dest('./html/js'));
}
相关文章：