javascript - 使用来自 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对于我的源 map 。

/**
 * 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:让我编辑这个答案。事实证明，上面的代码片段并没有给我所有的源 map 。检查映射文件时，源被列为 js 文件而不是 ts 文件，这意味着调试器不会捕获断点。

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