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

Question

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

html
--js
----main.ts

并且 html 在技术上是用于调试目的的站点根目录。

使用 browserify，我现在已经为 bundle.js 生成了一些源映射，其中包含 main.ts 的路径。问题是它们指向完整路径：

"html/js/main.ts"

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

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

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

编辑：

我正在使用以下 gist 作为我的源地图。

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

Answer 1

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

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

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

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

这是工作 gulp 任务，它监视任何 Typescript 文件的更改（只要它是 main.ts 的依赖项并触发 browserify 和新的源映射。它需要 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'));
}

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

Webstorm debugging with source maps from Browserify and Typescript

javascript

typescript

webstorm

browserify